Make sure your HTML5 document outline is backwards compatible

This is just a short reminder of something I wrote about in On using h1 for all heading levels in HTML5: make sure your HTML5 document outline is backwards compatible.

The reason is simple. Browsers and assistive technology haven’t implemented the HTML5 outline algorithm yet (the only exception I’m aware of is JAWS, which gets it wrong, as Jason Kiss explains in JAWS, IE and Headings in HTML5).

Most of the people who benefit the most from web pages having a logical document outline—screen reader users and to some extent keyboard-only users—will get anything from a confused to a completely flat document outline depending on how headings are used in HTML5. Unless, of course, you keep using the h1-h6 elements with the HTML5 sectioning elements to make sure that the document outline will be backwards compatible. You can use the Web Developer extension for Firefox to check the HTML 4 outline (Information - View Document outline) and the HTML5 outliner for the HTML5 algorithm.

Once browsers and assistive technology have implemented the HTML5 outline algorithm and the majority of users have upgraded you can use only h1 elements or mix and match heading levels as you wish, counting on the outline algorithm to save you. Personally I find headings that aren’t what they say on the box rather confusing, so I’ll probably keep using h1-h6 for the foreseeable future.

Posted on May 2, 2012 in HTML 5, Accessibility