WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Heading order

for

From: Léonie Watson
Date: Sep 30, 2015 9:48AM

> From: WebAIM-Forum On Behalf Of Schafer, Carmen
>
> We have encountered several instances of improper heading order (e.g. an
> <h4> above an <h3>), but we can't seem to find a firm agreement as to a)
> whether improper heading order should be cited as an accessibility concern
> or usability/design concern or b) which, if any, of the WCAG 2.0 Success
> Criteria covers improper heading order.
[...]
>
> Would anyone be willing to weigh in and possibly give us a definitive answer
> so we make sure we have the fullest possible understanding of this issue and
> pass it on to developers and others.

Do you have an example of the <h4> before <h3> scenario? Depending on the overall heading hierarchy, it may be entirely correct for the headings to be structured in this way. For example:

<h1>Title</h1>
...
<h2>Chapter 1</h2>
...
<h3>Section 1</h3>
...
<h4>Sub-section 1</h4>
...
<h4>Sub-section 2</h4>
...
<h3>Section 2</h3>
...
<h4>Subsection 1</h4>
...
<h2>Chapter 2</h2>
...

As others have noted, there is sometimes a good case for not starting the hierarchy with an <h1>. An example:

<h2>Navigation</h2>
...

<main>
<h1>Primary heading</h1>
...
<h2>Secondary heading</h2>
...
</main>

The key thing is to make sure the heading hierarchy reflects the structure of the content. For headings to be usable they need to be a representation of the visual structure.

For technical accessibility, heading hierarchy is usually handled under WCAG SC1.3.1 (info and relationships) [1]. One of the suggested techniques for meeting 1.3.1 is G141 (organizing a page using headings) [2].

If the <h4> preceeds the <h3> only to achieve some visual effect, then it fails SC1.3.1 under F43 (due to using structural markup in a way that does not represent relationships in the content) [3].
Léonie.

[1] http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/content-structure-separation-programmatic.html
[2] http://www.w3.org/TR/WCAG20-TECHS/G141.html
[3] http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F43


--
Senior accessibility engineer @PacielloGroup @LeonieWatson