Web accessibility - heading-order rule with missing <h2>

Question

We have inherited a website which we are currently trying to make WCAG2.0 AA compliant

One of the pages is failing the heading-order rule as it has an <h3> and <h4> tags but no prior <h1> or <h2>

We are in the process of adding an <h1> tag (as all pages should have one) but there is no need for an <h2> tag and to amend the <h3> and <h4> would involve a large refactoring of various jQuery code and CSS

Are there any tricks to make the page accessible? I'm loathed to put a hidden <h2> tag in as the screen readers would presumably pick this up. Or do they ignore the hidden tags and the page then becomes compliant?

Answer 1

If you really do care about accessibility, giving an empty h2 (even implicitly which is the case when you omit it) might give no clue, in some screen readers, of the announced section to users when they will navigate the outline of the document (1).

That being said, I can't find anywhere (neither WCAG or HTML5 documentation) where it's said that you can't omit one level of headings.

The only official (for HTML5.1) requirement is to use "headings of lower rank" to start new subsections, which should mean that you could use a h3 directly below a h1 but can't use another h1

Even the WCAG is giving an example using omitted ranks saying this example does not intend to prescribe the level for a particular section.

(1) HTML5.1 provides an outline algorithm where we can read about "implied headings" or about the use of the rank when there is an heading content element

EDIT : as this was said in the comments, HTML living standard now prohibit skipping heading levels, although having HTML conforming web page is still not a requisit for accessibility. See also the discussion here: https://github.com/whatwg/html/issues/8366

Answer 2

Are you trying to satisfy WCAG 2.0 AA or are you trying to make the page accessible?

These are usually the same, but sometimes not.

A hidden <h2> would pass WCAG depending on how you hide it. That, however, would not make the page more accessible.

While this may suck, the best, most correct approach is to fix the <h3>s and <h4>s to become correct levels (that is my answer, the rest of this is fluff). Your question might be more appropriate if you instead provide some code samples and ask for tips on how to write a regex or otherwise script these replacements throughout the inherited system.

If you are being told you have no time to do it right, then code examples (or a sample site) might still be helpful to get some guidance.

Answer 3

I would say the best way to ensure compliance is to refactor the code that is in the javascript/CSS. To hide elements you could use the hidden attribute or aria-hidden.

https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/

Answer 4

I really have seen this situation before, and actually have fallen into this trap myself. By applying styles to the h3 and h4, it is possible to make a page look, well, a certain way. Looking at the point of the header tags however, it is their purpose to add semantics to the document, as we all well know. Is it, therefore, meaningful to have a document outline where there is an h3 but no h2? Screenreaders and other accessibility tools use this header information and some could get confused. My most influential decision-making point is, "how will the user consume this information?" Will they be able to consume it? Is it meaningful to skip a header level? I initially think not, but please let me know of your differing opinion!