One of the challenges of moving to HTML5 is headings. With HTML4 it was all quite straightforward. You sequentially nested <h1> through <h6> tags to create a logical hierarchy of content on the page. Screen readers reported each heading exactly as they found it, and that was that. For example:
<body><h1>Heading 1 (reported as level 1)</h1><div><h2>Heading 2 (reported as level 2)</h2><p>...</p><h3>Heading 3 (reported as level 3)</h3><p>...</p></div>...</body>
HTML5 introduces the concept of relatively ranked headings. The level of a heading in HTML5 depends on its location within one (or more) sectioning elements – specifically the <nav>, <section>, <article> and <aside> tags. The HTML5 outlining algorithm makes it possible to use only <h1> headings on a page. The level of the heading is then redefined based on the nesting of the sectioning elements it’s wrapped in:
<body><h1>Heading 1 (reported as level 1)</h1><nav><h1>Heading 1 (reported as level 2)</h1>...</nav><section><h1>Heading 1 (Reported as level 2)</h1><article><h1>Heading 1 (reported as level 3)</h1>...</article>...</section>...</body>
Although the HTML5 specification encourages the use of <h1> only, it does allow explicitly ranked <h1> through <h6> headings to be used as well. This is where it can start to make your head spin if you’re not careful:
<body><h1>Heading 1 (reported as level 1)</h1><nav><h2>Heading 2 (reported as level 2)</h2>...</nav><section><h2>Heading 2 (Reported as level 2)</h2><article><h3>Heading 3 (reported as level 3)</h3>...</article>...</section>...</body>
The two HTML5 examples above effectively create the same heading hierarchy on the page. This leaves us with the question: which is the best technique to use?
As it so often does, the answer relies on browser and screen reader support. Those browsers and screen readers that support the HTML5 outlining algorithm will present a sequentially nested hierarchy of headings to the user when the <h1> only technique is used.
This means that those browser/screen reader combinations that don’t support HTML5 headings will simply present the user with a page full of level one headings when the <h1> only technique is used. Not the best experience!
To date, Jaws 13 is the only screen reader to have introduced support for HTML5 headings. The public beta includes good support for the <h1> only technique, but still has some difficulty handling explicitly ranked HTML5 headings.
The upshot is that for the time being you should use explicitly ranked headings in HTML5. You’ll need to be on your game when it comes to working out the heading hierarchy, but if you need to get back to basics, there’s a useful guide here.
