HTML5 and Accessibility: heading elements

The second of Aaron Anderson’s articles at WebAIM on Future Web Accessibility appeared. I recommend that you read the entire article, but there’s one section on headings that I want to quote here because I think it’s extremely important.

In current versions of HTML, the only way to define sections and outline-hierarchy of a document is use of the <h1>-<h6> in an otherwise flat structure. This is very beneficial to accessibility, but can be a bit awkward for web authors, especially when moving sections around in ways that change the heading depth. HTML5 introduces two new elements, <section> and <article>, that define logical sections and syndicatable articles present in a page; content hierarchy and heading levels are defined by nesting these tags inside each other. Because of this, HTML5 no longer requires that one actually use the correct heading level for a particular heading, but allows web authors to use <h1> everywhere, with the idea that assistive technologies and other systems can determine the heading level by the nesting of the <section> and <article> tags.

This is actually a perfectly fine way of doing things, but has the potential to create some sizable accessibility problems during the transition phase, that is, during the time where not everyone is using AT (of which there currently is none) that knows how to handle this. Since it will be several years before all the AT vendors update their products to support HTML5, and several more years before all users of those products upgrade to the newer versions, accessibility will require that we continue to use heading tags of the correct level, even when they’re inside nested <section>s and <article>s, at least for now.

Leave a Reply