HTML5 ranked headings for screen readers


Léonie Watson of Nomensa talks you through getting ranked headings in HTML5 right for screen readers

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:

  1. <body>
  2. <h1>Heading 1 (reported as level 1)</h1>
  3. <div>
  4. <h2>Heading 2 (reported as level 2)</h2>
  5. <p>…</p>
  6. <h3>Heading 3 (reported as level 3)</h3>
  7. <p>…</p>
  8. </div>
  9. </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:

  1. <body>
  2. <h1>Heading 1 (reported as level 1)</h1>
  3. <nav>
  4. <h1>Heading 1 (reported as level 2)</h1>
  5. </nav>
  6. <section>
  7. <h1>Heading 1 (Reported as level 2)</h1>
  8. <article>
  9. <h1>Heading 1 (reported as level 3)</h1>
  10. </article>
  11. </section>
  12. </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:

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.