HTML5 ranked headings for screen readers

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.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.