Hiding headings in the document outline for accessibility reasons

Question

I have a question about ensuring good document structure when the visual design doesn't call for explicit headings.

Take the following example HTML for a homepage.

<header>
  <h1>Our Brand</h1>
  <p>Tagline</p>
</header>

<section class="company">
  <h2>Our Company</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus error hic, aliquid assumenda sed optio, praesentium repellendus numquam laudantium esse molestias minima cum mollitia fugiat? Eum impedit deserunt aliquid ratione.</p>
</section>

<section class="values">
  <h2>Our Values</h2>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Officia reiciendis illum temporibus. Praesentium repellat, iste officiis?</li>
    <li>Quos facere enim officiis, recusandae inventore veritatis id.</li>
    <li>Iste deleniti doloremque dignissimos, voluptate obcaecati velit optio.</li>
    <li>Ut non enim, dolore saepe minus soluta illum?</li>
    <li>Enim iure odit soluta laboriosam quis cupiditate eveniet.</li>
  </ul>
</section>

<section class="team">
  <h2>Our Team</h2>
  <h3>Marketing</h3>
  <ul>
    <li>Lorem ipsum.</li>
    <li>Voluptates, cupiditate.</li>
    <li>Quia, ad?</li>
    <li>Facere, blanditiis!</li>
  </ul>
  <h3>Social</h3>
  <ul>
    <li>Lorem ipsum.</li>
    <li>Voluptates, cupiditate.</li>
    <li>Quia, ad?</li>
    <li>Facere, blanditiis!</li>
  </ul>
  <h3>PR</h3>
  <ul>
    <li>Lorem ipsum.</li>
    <li>Voluptates, cupiditate.</li>
    <li>Quia, ad?</li>
    <li>Facere, blanditiis!</li>
  </ul>
</section>

In this markup, there is a clear heading structure (i.e. h1 > h2 > h3).

But let's say it's been agreed that the 'Our Team' <h2> heading doesn't need to be shown as it is implied by the visual design. However, it is important for good document structure (for accessibility reasons).

Do we...

1. Show the 'Our Team' <h2> heading for screen readers and search engines using a '.visuallyhidden' class? (i.e. one which hides content off-screen)

2. Change all the <h3>s in the 'team' section to be <h2>s? This doesn't feel right from a contents perspective, as they feel like they should be contained under their own heading.

3. Skip the 'Our Team' <h2> heading and go straight to <h3>. Skipping heading levels doesn't seem right either.

Sidenote,

I've noticed that gov.uk (often hailed as a good accessibility site) do this. They are hiding a <h1> for their 'All Categories' heading. Also, they are hiding a <h2> in the footer for 'Support Links'

https://www.gov.uk/browse/benefits

Hiding the headings seems sensible but i've seen a lot of people posting about how Google will treat this as a black-hat SEO tactic.

I assume it would take a lot more than a couple of hidden headings to trigger any penalisation from Google, but maybe doing it on <h1>s would be a problem.

Any thoughts on this issue would be appreciated!

Answer 1

I would not worry about SEO penalties here. Years of addressing what you are trying to address suggest the effect is either none or negligible.

In your example, the <h2> has no content, it leads directly to the <h3>. In that scenario I always like to add some content so it isn't a hard visual / audio jump. As it is, if I navigate by heading in my screen reader, then I get no content under that <h2>, so it might already feel a bit odd.

Anyway, if you think you truly do not need the "Teams" text (visually or otherwise), then you could just remove it altogether and elevate the others to <h2>.

So from your three options:

1. Show the 'Our Team' <h2> heading for screen readers and search engines using a .visuallyhidden class? (i.e. one which hides content off-screen)

Meh. In my opinion, either there is content there to support it or there isn't. In your example, there is no content to support it. If you do decide to visually hide the text, don't do it off-screen as that can jack with RTL translations, look at a clipped text instead (there are many examples, that just happens to have a recent bit of tweaking).

2. Change all the <h3>s in the 'team' section to be <h2>s? This doesn't feel right from a contents perspective, as they feel like they should be contained under their own heading.

Do this one. I tend to agree in principle that Teams warrants its own heading. But to do that you need content under the Teams <h2>, in my opinion. If no content will go there and you remove the Teams <h2>, then this is your next best option.

3. Skip the 'Our Team' <h2> heading and go straight to <h3>. Skipping heading levels doesn't seem right either.

Nope. That is a WCAG failure for most auditors (I will fail it).

Answer 2

As far as the outline is concerned,

the heading <h2>Our Team</h2> does two useful things in your context:

• it makes clear what "Marketing", "Social", and "PR" refer to (otherwise it would not be clear that these sections contain lists of team members)
• it groups the three sections under one outline entry (otherwise they would be on the same level like "Our Values" etc., which wouldn’t make sense)

Visually hiding the heading fulfills both jobs. I would do this, but only if it’s really not possible to show the heading (which is typically always preferable), of course.

An alternative that fulfills the second job (grouping the entries), but not the first one (giving a useful label), is to use section elements explicitly (which is, by the way, recommended to do anyway):

<section class="team">
  <h2>Our Team</h2>

  <section>
    <h3>Marketing</h3>
  </section>

  <section>
    <h3>Social</h3>
  </section>

  <section>
    <h3>PR</h3>
  </section>

</section>

Now you could omit the h2 without changing the outline (except for the label, of course), so the three sections are still grouped, conveying that they belong together.

(Of course this only works for user agents that implement the outline algorithm.)