HTML5 Headings, Content Sections and Assistive Technology

I was seeking the most recent information on support for HTML5 headings by assistive technology.

In seeking this information it became obvious I needed to gain a concrete understanding of the HTML5 document outline and sectioning content, and how these may be used be interpreted by assistive technology.

What is the document outline?

Automatic generation of outlines is important, especially for assistive technology, that are likely to adapt the way they present information to the users according to the structure of the document.

Sections and Outlines of an HTML5 Document, Mozilla Development Network

In HTML4 the structure or document outline would be implied by the heading levels h1 to h6 throughout the document.

HTML5 provides explicit sectioning content (article, section, nav and aside) along with implied heading levels (h1 – h6) within the sectioning content to generate the document outline.

Sectioning Content

For portability and syndication the HTML5 specification provides a document outline algorithm which encourages the use of h1 headings for all section content. Within the HTML5 document the headings are therefore intended to be ranked relative to position of the section content.

So each section or article element can have a h1 heading level to allow markup preservation of that element. Although the HTML5 specification does allow the use of h1 to h6 headings.

Support for Section Headings

However, the articles I have read (the most recent being written in May 2013) detailing support for the HTML5 document algorithm, state that support has not been implemented in all screen readers yet.

So, although I will use the semantic HTML5 section content elements, and because HTML5 allows the use of any of h1 to h6 headings within section content, for now I will continue use heading levels as before to imply the structure of the overall document.

A good tool to review document outline through the use of headings in HTML5 is the HTML5 Outliner Chrome extension.

Update October 2013

The Paciello Group published a post on the on lack of user agent implementation of the HTML5 Document Outline.

Sources and More Information

The following provide more detailed explanations of HTML5 semantics, sectioning content, the HTML5 document outlining algorithm, and implementation by browsers and screen readers.

Leave a Reply

Your email address will not be published.