JAWS' implementation of the HTML5 outline algorithm is incorrect with IE and Firefox when the author explicitly specifies the heading levels. Fortunately, there is a relatively simple fix until JAWS finally fixes the bug.
Author: Gez Lemon
The HTML5 outline algorithm and JAWS
The HTML5 outline algorithm should automatically expose the correct heading level depending on the structure of sectioning elements. The following section elements influence the outline algorithm:
The following example is marked up using just level-1 heading elements, and is reported correctly by JAWS using IE and Firefox.
Using JAWS with IE and Firefox, the heading levels are announced as:
Main page title - heading level 1
Site navigation - heading level 2
Recent posts - heading level 2
HTML5 Outline Algorithm and Headings - heading level 3
Publish date - heading level 4
Handling erratic behaviour with AT - heading level 3
Views - heading level 4
With screen readers that do not yet support the HTML5 outline algorithm, such as NVDA and VoiceOver, all of the headings are announced as level-1 headings. The HTML5 outline algorithm allows authors to explicitly specify the heading levels so that they're supported by older user agents.
This example now correctly reports the heading levels in screen readers that do not support the HTML5 outline algorithm, but are now reported incorrectly by JAWS. JAWS announces the level implied by the outline added to the explicitly specified level. The headings in this example are now announced by JAWS as:
Main page title - heading level 1
Site navigation - heading level 3
Recent posts - heading level 3
HTML5 Outline Algorithm and Headings - heading level 5
Publish date - heading level 2 (Firefox only; not recognised as a heading in IE)
Handling erratic behaviour with AT - heading level 5
Views - heading level 2 (Firefox only; not recognised as a heading in IE)
JAWS calculates all heading levels within a section by adding the explicit heading level to the heading level calculated from the outline. This works if all headings within a section start with a level-1 heading, and then used in order without skipping a level in the section, but breaks if the levels are not reset for each section. If a level-3 heading element is defined in the first section element, JAWS announces it as a level-4 heading:
Similarly, if a level is skipped, JAWS just adds that level to the current outline calculation. So a level-4 element in the first section element would be announced as a level-5 heading:
Fixing the JAWS bug
Fortunately, the problem with JAWS can be solved using WAI-ARIA by applying the heading role and aria-level attribute on the heading elements that are reported incorrectly.
The heading elements are now announced correctly by all screen readers, including JAWS.
The article element just represents a self-contained section of a page, so doesn't necessarily represent the major section for the whole document. In the example posted, the article elements are a series of summaries of recent posts, so should be sub-headings, rather than repeated level-1 headings for the whole page.
<h1 role="heading" aria-level="3"> is exposed as a level-3 heading by AT that supports WAI-ARIA, and level-1 by AT that doesn't. <h3 role="heading" aria-level="3"> is exposed as a level-3 heading element by any AT that understands heading elements.
It doesn't help, I think, that the outline algorithm is a feature at risk and hasn't yet stabilised in the spec. Or that the implementation of the algorithm by tools like gsnedders' and Steve's bookmarklet aren't necessarily aligned with more recent implementations of the algorithm in the W3C's dev validator (see http://lists.w3.org/Archives/Public/public-html/2013Apr/0003.html). While JAWS' implementation is clearly wrong, things with the algorithm itself aren't so clear.
In order to satisfy screen readers and other assistive technologies, it is necessary to use the traditional/HTML 4 heading structure, and then to work around the JAWS bug by using ARIA to specify the heading level, overriding JAWS incorrect default behavior.We add role="heading" and aria-level as appropriate to the level of the heading in the outline. These additions tell ARIA-aware screen readers/browsers, such as JAWS with IE or Firefox, to report the correct level for the heading.