If you use explicitly ranked h1 to 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 use [
h1 to h6] elements of the appropriate rank for the section's nesting level.
The sectioning elements are article, aside, nav, and section. As such, according to the algorithm, the following two structures create identical outlines:
Using h1s Only
<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.
Where only 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 h1 to 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 h1 to 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.
Update: If you want to check for yourself, here are the actual test pages I used:
All Versions of IE Affected
Interestingly, this behaviour occurs in all versions of IE, from IE6 and above. With IE6 to IE8, which have no native support for HTML5, this behaviour depends on those versions of IE being forced to recognise the HTML5 elements through a now common JavaScript hack, e.g., the HTML5 Shiv. Without it, JAWS presents each heading at a level defined by the heading element used. So every h1 remains a level one heading, every h2 a level two heading, and so on, regardless of the relevant sectioning element's nesting level. Of course, without the JavaScript shim, there's no styling of HTML5 elements in IE8 and below, so this scenario is rather moot, unless the page's developer has decided to not bother supporting those browsers.
Update (Oct. 17, 2011): JAWS 13 in Firefox
The latest release of the JAWS 13 beta, 13.0.241, behaves the same in Internet Explorer, but now also incorrectly represents explicitly ranked headings in Firefox. In fact, it's even worse.
In Firefox, the h4 nested three sectioning levels deep in the aside from our example is identified as a second level heading. If you use an h1, it is properly considered a fourth level heading, since one plus three equals four. If you use an h2, you get a fifth level heading, and an h3 gets you a sixth level heading. The h4 to h6 elements, however, all become second level headings.
This behaviour is wrong. According to the HTML5 spec, no matter what explicitly ranked heading element is used, a user agent that supports the HTML5 outline algorithm should assign an appropriate level for the heading based on the nesting of sectioning elements in which the heading is found.
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 h1 to 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 h1 to h6 elements in my HTML5 pages.
Translations
Note: The translations below are listed with no guarantee of their accuracy (or the accessibility of their content).
- Estonian translation by Adrian Pantilimonu: JAWS, IE ja Rubriikidesse aastal HTML5
- Lithuanian translation by Giedrius Sadauskas: JAWS, IE ir Antraščių HTML5