Concealment of headings in the document of the reasons of availability

Question

I have a question about ensuring a good document structure when the visual design does not require explicit headers.

Take the following HTML example for the home page.

<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> 

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

But let me say that it was agreed that the heading "Our team" <h2> does not need to be shown, as this is implied by visual design. However, this is important for a good document structure (for reasons of accessibility).

We...

• Show the heading "Our team" <h2> for screen readers and search engines using the ".visuallyhidden" class? (i.e., one that hides content off the screen).

• Change all <h3> in the command section as <h2> s? This does not seem to be correct in terms of content, as they feel that they should be kept under their own heading.

• Skip the heading "Our Team" <h2> and go straight to <h3> . Skipping heading levels is also wrong.

Sidenote

I noticed that gov.uk (often called a good accessibility site) does this. They hide <h1> for the "All Categories" heading. In addition, they hide <h2> in the footer for "Support Links"

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

Hiding the headlines seems reasonable, but I saw how many people post information about how Google will view this as a black hat SEO tactic.

I suppose that in order to cause any punishment from Google, it would take much more than a few hidden headers, but maybe doing it on <h1> would be a problem.

Any thoughts on this will be appreciated!

Answer 1

I would not worry about SEO fines here. Years of addressing what you are trying to solve indicate that the effect is neither significant nor insignificant.

In your example, <h2> has no content, it leads directly to <h3> . In this scenario, I always like to add some content so that it is not a hard visual / sound jump. Be that as it may, if I navigate through the headers in my screen reader, then I don't get the content under this <h2> , so it may already feel a little strange.

In any case, if you think that you really do not need the text of the "Team" (visually or otherwise), you can simply delete it completely and raise the rest to <h2> .

So, of the three options:

• Show the heading "Our Team" <h2> for screen readers and search engines using the .visuallyhidden class? (i.e., one that hides content off the screen).

Fur. In my opinion, either there is content to support it, or not. In your example, there is no content to support it. If you decide to visually hide text, do not do it off-screen, as it can be used with RTL translations, look at cropped text instead (there are many examples that just have a recent cue ballot).

2. Change all <h3> in the command section to <h2> s? This does not seem to be correct in terms of content, as they feel that they should be kept under their own heading.

Do it . I tend to agree in principle that Teams guarantee their own course. But for this you, in my opinion, need content under the <h2> commands. If no content goes there and you remove the <h2> commands, then this is your next best option.

3. Skip the heading "Our Team" <h2> and go straight to <h3> . Skipping heading levels is also wrong.

Nope. This is a WCAG failure for most auditors (I will refuse it).

Answer 2

Regarding the contour,

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

• he clearly shows that he refers to Marketing, Social, and PR (otherwise it would not be clear that these sections contain lists of team members).
• he groups three sections under one contour record (otherwise they would be at the same level as Our Values, etc., which would not make sense)

Visually hiding the title performs both tasks. I would do it, but only if it is really impossible to show the title (which is usually always preferable), of course.

An alternative that performs the second task (grouping records), but not the first (giving a useful label), is to use explicitly section elements (by the way, it is recommended to do this 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 can omit h2 without changing the outline (except for the shortcut, of course), so the three sections are still grouped, conveying that they belong to each other.

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