3

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?

Fiona - myaccessible.website
  • 14,481
  • 16
  • 82
  • 117
Mike
  • 2,391
  • 6
  • 33
  • 72
  • 1
    If you don't have a level 2 heading, your current level 3 and level 4 headings are essentially level 2 and level 3 headings. Are you sure you cannot simply run `sed s/h3/h2/ | sed s/h4/h3/` throughout your code base? – Zeta Sep 29 '16 at 10:18
  • How is there no need for an h2? If you were to make a table of contents of this page, where would the h3s and h4s sit? as Zeta mentioned, the h3 would likely actually be an h2. If you're saying it's an h3 because its style is an h3, then you are likely failing WCAG 1.3.1 with a number of the recognized failure criteria listed [here](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) – Skerrvy Sep 29 '16 at 13:18
  • @Zeta, the level 3 and 4 do not automagically become level 2 and level 3 headings. That suggests the document outline algorithm exists, but it does not. However, your suggestion of a search and replace seems the most straightforward without seeing the code for this site. – aardrian Sep 29 '16 at 13:22
  • @Mike, can you control the containers? If so, something like this JS might help to dynamically change the headings levels, though it is one hell of a hack: http://codepen.io/aardrian/pen/VKkwwE?editors=0010 – aardrian Sep 29 '16 at 13:24
  • @aardrian err, I didn't mean automagically. I meant: "if you use `

    ` and `

    ` and `

    `, you're not using the latter two semantically correct".

     – Zeta Sep 29 '16 at 13:24
  • @Zeta, ah, yes. Gotcha. – aardrian Sep 29 '16 at 13:26
  • It's not conforming to current HTML5 to not have a H1 or skip heading levels. See more at: https://html.spec.whatwg.org/multipage/sections.html#headings-and-outlines-2 – Andre Figueiredo Jul 18 '23 at 20:38

4 Answers4

4

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.

aardrian
  • 8,581
  • 30
  • 40
  • Hands down, this is the way to go. If, however, it's legacy code, and next to impossible to refactor (still should!), there is also the option of using `role="heading"` with `aria-level`. This would allow the semantics to be changed to reflect proper hierarchical structure...but, this should be last resort, and tested on all supported screen-readers to be sure they all support this. – Michel Hébert Nov 24 '16 at 05:08
2

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

Adam
  • 17,838
  • 32
  • 54
  • Skipping levels is non-conforming: "Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead's heading level." https://html.spec.whatwg.org/multipage/sections.html#headings-and-outlines-2 – Andre Figueiredo Jul 18 '23 at 20:35
  • 1
    Thanks for pointing me out this change in the specs. this change is both disturbing and funny – Adam Jul 19 '23 at 06:25
  • That part of the document/spec is talking about the **outline** feature - creating an outline of a page using the heading levels. It says the outline should have the requirements aforementioned. It does not say that

    levels can't skip a level. Granted, an outline is generated from the heading elements but if the outline generator finds missing levels, then it sounds like the outline has to handle it. You don't have to adjust the heading elements themselves.

     – slugolicious Jul 19 '23 at 19:03
1

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!

Craig Orcutt
  • 11
  • 1
  • 4
0

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/

Franklyn
  • 24
  • 1
  • 3