The idea behind HTML 5's heading algorithm is great: it promises to offer valid and highly accessible heading outlines that can be much easier to implement than traditional ones. Sadly, it was never really picked up by any browser or screen reader, and the HTML 5.2 draft advises against using it any further.
Short summary
No single relevant assistive software supports the HTML 5 outline algorithm, and as such the current HTML 5.2 draft: Creating an outline) advises not to use it and to rely upon traditional headings (<h1> to <h6>) instead.
If you happen to have implemented such an HTML 5 outline already, there are ways to optimise it using ARIA, so assistive technologies can use them.
Exhaustive explanation
The HTML 5's heading outline algorithm allows to create and maintain valid heading outlines very easily by using the HTML 5 structural elements like <main>, <article> and <aside>.
In traditional HTML, you have to choose the correct heading level rigorously depending on the current context. In HTML 5, using structural elements you can start with whatever heading level you want. This makes including external content very easy, as you do not have to worry about the content's heading levels anymore (speaking about it: another way to include external content is by using an iframe, see External Content in iFrames).
Sadly though, it is not possible to use HTML 5 heading outlines for accessible websites, as we will explain further on.
Fact: HTML 5 outlines are not accessible
The HTML 5 outline algorithm sadly was never implemented by any relevant assistive software. Because of that, meanwhile even the W3C advises against using the HTML 5 document outline in its HTML 5.2 draft: Computer says NO to HTML 5 document outline (html5Doctor.com).
The following example shows the technically correct usage of the HTML 5 outline algorithm.
<h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><section><h1>
Physical Activities
</h1><section><h1>
Playing Soccer
</h1><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p></section><section><h1>
Dancing
</h1><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><section><h1>
Salsa
</h1><p>
Salsa is a popular form of social dance that originated in the Caribbean.
</p></section><section><h1>
Rock'n'Roll
</h1><p>
Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.
</p></section></section><section><h1>
Gardening
</h1><p>
Gardening is the practice of growing and cultivating plants as part of horticulture.
</p></section></section><section><h1>
Relaxing Activities
</h1><section><h1>
Watching Movies
</h1><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></section><section><h1>
Meditate
</h1><p>
Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself.
</p></section></section>
Category
Result
Comments
Date
Keyboard only
✔ (pass) pass
-
2018-4-9
NVDA 2018.1 + FF Quantum 59.0.2
✘ (fail) fail
-
2018-4-9
JAWS 2018.3 + IE 11
✘ (fail) fail
-
2018-4-5
JAWS 2018.3 + FF ESR 52.7.3
✘ (fail) fail
-
2018-5-9
On a visual level, browsers apply stylings that resemble correct indentation of nested heading levels.
Checked out with a screen reader though reveal that all headings semantically are on the very first level. What a bummer!
How it ought to behave
If you want to see how the same example ought to be interpreted by assistive software, check out the browser extension HeadingsMap (Chrome) or HeadingsMap (Firefox). It has an experimental feature for displaying HTML 5 outlines.
How to fix HTML 5 outlines
As seen in Alternative techniques for labelling page regions, the HTML 5 structural elements are of great value to accessibility. Sadly though, the HTML 5 outline algorithm - that is made possible by them - cannot be used. But there are alternatives.
If possible: use standard HTML headings
The best is to simply avoid relying on the HTML 5 outline algorithm. Instead, use the traditional HTML heading mechanism (irrespective of whether you're combining them with elements like <main> or <article>).
<h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><section><h2>
Physical Activities
</h2><section><h3>
Playing Soccer
</h3><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p></section><section><h3>
Dancing
</h3><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><section><h4>
Salsa
</h4><p>
Salsa is a popular form of social dance that originated in the Caribbean.
</p></section><section><h4>
Rock'n'Roll
</h4><p>
Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.
</p></section></section><section><h3>
Gardening
</h3><p>
Gardening is the practice of growing and cultivating plants as part of horticulture.
</p></section></section><section><h2>
Relaxing Activities
</h2><section><h3>
Watching Movies
</h3><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></section><section><h3>
Meditate
</h3><p>
Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself.
</p></section></section>
Category
Result
Comments
Date
Keyboard only
✔ (pass) pass
-
2018-4-9
NVDA 2018.1 + FF Quantum 59.0.2
✔ (pass) pass
-
2018-4-9
JAWS 2018.3 + IE 11
✔ (pass) pass
-
2018-4-5
JAWS 2018.3 + FF ESR 52.7.3
✔ (pass) pass
-
2018-4-9
Here's the result in NVDA:
Backwards compatibility is guaranteed with this solution.
Otherwise: use ARIA to overrule heading levels
If you really need to use HTML 5 outline, you can try to use ARIA's role="heading" together with aria-level (to set a specific level, for example aria-level="3" for heading level 3). You could do that even programmatically using JavaScript.
<h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><section><h1aria-level="2"role="heading">
Physical Activities
</h1><section><h1aria-level="3"role="heading">
Playing Soccer
</h1><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p></section><section><h1aria-level="3"role="heading">
Dancing
</h1><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><section><h1aria-level="4"role="heading">
Salsa
</h1><p>
Salsa is a popular form of social dance that originated in the Caribbean.
</p></section><section><h1aria-level="4"role="heading">
Rock'n'Roll
</h1><p>
Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.
</p></section></section><section><h1aria-level="3"role="heading">
Gardening
</h1><p>
Gardening is the practice of growing and cultivating plants as part of horticulture.
</p></section></section><section><h1aria-level="2"role="heading">
Relaxing Activities
</h1><section><h1aria-level="3"role="heading">
Watching Movies
</h1><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></section><section><h1aria-level="3"role="heading">
Meditate
</h1><p>
Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself.
</p></section></section>
Category
Result
Comments
Date
Keyboard only
✔ (pass) pass
-
2018-4-9
NVDA 2018.1 + FF Quantum 59.0.2
✔ (pass) pass
-
2018-4-9
JAWS 2018.3 + IE 11
✔ (pass) pass
-
2018-4-5
JAWS 2018.3 + FF ESR 52.7.3
✔ (pass) pass
-
2018-4-9
And for the sake of completeness, here's the result in NVDA:
But remember: while this is generally working in most modern assistive software, missing backwards compatibility of ARIA can be a real problem for older software. You should only stick to this solution if you really do not have another choice. For more information, see ARIA - when HTML simply is not enough.
