WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Heading order

for

From: Schafer, Carmen
Date: Sep 30, 2015 11:43AM

Leonie, thank you for the thorough explanation which answered our questions completely!

Carmen Schafer
User Support Analyst, ACT Center
Division of IT, University of Missouri

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Léonie Watson
Sent: Wednesday, September 30, 2015 10:48 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Heading order

> 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