On using h1 for all heading levels in HTML5

One of the problems that HTML5 aims to solve is that of heading levels, particularly in documents where content is cut and pasted from other documents or inserted through syndication from another source. In previous versions of HTML you need to manually make sure that any headings in the inserted or copied content are of the right level, i.e. h1-h6.

You can keep using h1-h6 in HTML5, but you can also choose to use only h1 elements for all headings and rely on the HTML5 outline algorithm to sort out the heading hierarchy. If you do this, however, you should be aware that currently there is very little support for the HTML5 outline in web browsers, screen readers and developer tools.

I bring this up because I have seen some HTML5 articles and blog posts that mention the new document outline without emphasising the current lack of support. That lack of support is a problem because it makes headings less useful to people who need a proper document outline to better understand content structure and use them as an aid for navigating within web documents. The most common example is screen reader users.

If you’re not that familiar with the HTML5 outline you may want to take a look at a couple of my previous articles on that topic: HTML5 sectioning elements, headings, and document outlines and HTML5 document outline revisited.

Screen readers

I made a very simple HTML5 outline document (ripped straight from the HTML5 specification) to test if any of the screen readers I have at my disposal interpret an HTML5 document outline correctly. I tested with VoiceOver (both OS X and iOS versions), NVDA and Orca, and none of them do—they all announce all headings as being level 1. In practice this makes the document structure completely flat to screen reader users.

As far as I know, no screen reader has yet implemented support for the HTML5 outline algorithm, but if you know of one that has, please let me know (either through my contact form or @rogerjohansson on Twitter).

Developer tools and browsers

Another type of tool that people use to verify document outlines is developer tools for web browsers. Two examples are the Web Developer extension for Firefox and Chrome and the Accessibility Evaluation Toolbar for Firefox. Both of these will let you view the document outline to verify that it is correct, but neither supports the HTML5 outline at this time.

In fact, the only software (besides tools made specifically for verifying the HTML5 outline algorithm) that I have seen do anything special when it encounters an HTML5 document with only h1 headings is Firefox. As of version 4, its default CSS adjusts the size of h1 elements inside HTML5 sectioning content elements, making them the same size as their corresponding h2 - h6 heading.

Update: Chrome does the same thing. I have no idea from which version—I had version 9 installed and after updating it to version 12 it uses UA CSS similar to that of Firefox for headings.

“Until user agents”

So just a word of caution. While it may be tempting to stop thinking about heading levels and let the HTML5 outline algorithm sort things out automatically, I think we should wait until browsers and—more importantly—assistive technology have caught up. And even once they have, if we want to be backwards compatible we’ll have to wait a while longer.

In the meantime my advice is to use HTML5 sectioning content elements when they are appropriate, but continue to use h1 - h6 for headings. That way you can safely use the new elements.

Posted on June 13, 2011 in HTML 5, Accessibility