Accessibility: Why heading tags need to be sequential

If you are involved with website accessibility, you have likely heard that heading tags should be in sequential order only.  Why is that?

WebAIM’s WCAG 2 Checklist item 1.3.2, Meaningful Sequence, states “the reading and navigation order (determined by code order) is logical and intuitive.”

In general, screen readers will follow the DOM order of the web page and not the visual order.  The screen reader is interacting with the accessibility tree which is based directly on the DOM tree.  Think of the web page as being serialized into a single flow of content.

WebAIM’s WCAG 2 Checklist item 2.4.1, Bypass Blocks, states “A proper heading structure and / or identification of page regions / landmarks may be considered a sufficient technique” to skip blocks of content.  Navigating the page by headings offers a quick way to understand what is on the page.  It is much more productive than moving through all content laterally.

Apple VoiceOver has a popular feature called Web Item rotor.  Web Item rotor can be used to quickly jump to links, headings, tables, and more on a web page.  The headings menu allows the user to browse through headings and choose the ones to navigate to.  Headings won’t be organized sequentially h1 through h6.  The order could be, for example, h1, h2, h2, h3, h3, h4, h2, h2.  The headings will be organized as found in the DOM.

It is imperative that the headings follow a logical order.  Voiceover speaks the heading level every time the user arrows to a particular heading.  The heading level conveys level of importance.  Think of it as sections and subsections of content.  The logical flow should be similar to a nested outline.