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.
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.
- Sections and Outlines of an HTML5 Document – Mozilla Developer Network – most recently updated May 2013
- Document Outlines – HTML5 Doctor – July 2011
- HTML5 And The Document Outlining Algorithm – Smashing Magazine – August 2011
- HTML5 sectioning elements, headings, and document outlines – 456 Berea St – March 2011
- The HTML5 outline algorithm and JAWS – Juicy Studio – May 2013
- HTML5 and CSS3 for the Real World Book – Alexis Goldstein, Louis Lazaris & Estelle Weyl
- JAWS, IE and Headings in HTML5 – Accessible Culture – October 2011
- HTML5 Ranked Headings for Screen Readers – .Net Magazine – October 2012