If you use explicitly ranked
h6 headings nested in HTML5 sectioning elements, as opposed to using exclusively
h1 elements, JAWS 12.0.1170, as well as the JAWS 13.0.171 beta, will misrepresent the heading hierarchy.
Headings in HTML5
The HTML5 outline algorithm allows us to use the
h1 element for every heading on a page, and depending on the nesting of the sectioning element in which the
h1 is found, the heading's rank will be redefined accordingly. While the HMTL5 specification encourages us to use only
h1 elements, we are permitted to
h6] elements of the appropriate rank for the section's nesting level.
The sectioning elements are
section. As such, according to the algorithm, the following two structures create identical outlines:
<h1>Level 1</h1> <nav> <h1>Level 2</h1> </nav> <section> <h1>Level 2</h1> <article> <h1>Level 3</h1> <aside> <h1>Level 4</h1> </aside> </article> </section>
Using Explicitly Ranked Headings
<h1>Level 1</h1> <nav> <h2>Level 2</h2> </nav> <section> <h2>Level 2</h2> <article> <h3>Level 3</h3> <aside> <h4>Level 4</h4> </aside> </article> </section>
Use Explicitly Ranked Headings For Now
It's a good thing that we have a choice of which approach to take, as support for the HTML5 outline algorithm in current browsers and assistive technologies is not quite there yet.
h1 elements are used, a non-supporting browser or assistive technology will find nothing but
h1 headings, which does not help a user understand the document's structure or heading hierarchy. For now, it is probably best to continue using explicitly ranked
h6 elements as appropriate.
However, at least one screen reader in one browser is now supporting the
h1-only approach to using headings in HTML5. But as good as this sounds, the particular support it has introduced is problematic.
JAWS 12 and 13 in Internet Explorer
If you use an
h1 for every heading, JAWS 12 and 13 beta will, in Internet Explorer but not Firefox, correctly rank the heading in accordance with its section's nesting level. For example, an
h1 nested two sectioning elements deep will effectively become a third level heading. JAWS appears to be simply adding the required number of levels to the heading as appropriate.
At the same time, and this is the problematic part, JAWS appears to be doing this even if you've taken the alternative approach and have used explicitly ranked
h6 elements. That is, if you've correctly used an
h3 element nested two sectioning levels deep, it becomes an
h5 as far as JAWS in IE is concerned. Obviously, this can significantly alter the page's document outline or heading hierarchy as represented to the user.
If we take the second HTML5 structure we saw above, where the heading levels are explicitly set using appropriately ranked heading elements, JAWS in IE effectively interprets it as follows:
<h1>Level 1</h1> <nav> <h2>Level 3</h2> </nav> <section> <h2>Level 3</h2> <article> <h3>Level 5</h3> <aside> <h4>Level 7</h4> </aside> </article> </section>
Not only does the heading hierarchy now jump from a level one, to a level three, to a level five heading, the
h4 heading in the
aside element, nested three sectioning elements deep, becomes a 7th level heading. Since there is no such thing as an
h7 element, JAWS does not even identify it as a heading. When moving from heading to heading through the page, as JAWS permits using the h key, this heading is simply skipped over. Nor does the heading appear in JAWS' headings list dialog.
All Versions of IE Affected
h1 remains a level one heading, every
A Bug and a Dilemma
I'm happy calling this behaviour a bug. While it's great that JAWS now supports the
h1-only approach to headings in HTML5, it's hardly reasonable to start misrepresenting properly ranked
h6 elements. Using explicitly ranked heading elements is clearly permitted by the HTML5 specification, and remains the only way to provide most current user agents a representative and meaningful document outline.
The dilemma is that using only
h1 headings to provide a meaningful document outline for users of what is possibly the most popular screen reader and browser combination today means providing users of all other current screen reader and browser combinations effectively no meaningful heading hierarchy. Or, conversely, where headings in HTML5 are concerned, supporting most screen readers and browsers means not supporting JAWS 12 and 13 in Internet Explorer.
These are the sorts of decisions we don't want and shouldn't have to make when building accessible web pages, but they are a reality that we unfortunately get used to. On the other hand, screen reader and browser development is moving very quickly these days, so this particular problem may not exist for long.
You'll have to make up your own mind on how you deal with this issue. For me, until there's broad support for the
h1-only approach across most screen readers and browsers in use, I'll take the more backwards-compatible route and use appropriately ranked
h6 elements in my HTML5 pages.