Summary
Separating secondary content from the primary allows users of assistive technologies to more easily follow the main narrative.
Techniques
- Ensure that all complex structures like lists, tables, figures, code samples and the like been properly tagged using the appropriate structural elements. [[WCAG-1.3.1]]
- Check that the
section
andaside
elements have been applied to groupings of primary and secondary content, respectively. [[WCAG-1.3.1]] - Check that the appropriate semantics have been applied to all elements to disambiguate their use. [[WCAG-1.3.1]]
- Check that the order of content within the markup accurately reflects the natural reading order. [[WCAG-1.3.2]]
- Ensure that JavaScript is not required to be enabled in order to read a document from beginning to end. [[WCAG-1.3.2]]
Example
Frequently Asked Questions
- Why does the logical reading order matter?
Consider how someone reading using a text-to-speech engine interacts with your publication. They are navigating at the markup level, moving from structure to structure and hearing the prose rendered at each step. That's fine, but now picture having no information about the structure you've just reached. Are you going to the next paragraph, or is a footnote suddenly going to be read back? Did the last section end or did you just jump into a sidebar?
Without structure and semantics, there's no way to easily move from one structure to the next. Where does the sidebar marked as a
div
end and the next paragraph continue? These questions are left to the user to puzzle out, leaving them manually navigating the publication to fit together the elusive reading order from the generic markup. It's also why semantically meaningless markup ruins the reading experience, if not makes it downright impossible.- How does semantic markup facilitate reading?
Accessible user agents typically provide the option for users to select elements to ignore. Semantic markup eases this process of identifying and skipping non-essential content. A user may still choose to render secondary content as it occurs, but it becomes their choice again, and no longer a burden to navigate through or around as desired.
Explanation
Publications typically have a primary narrative that users are expected to follow from beginning to end, and being able to navigate this dialogue uninterrupted is a key factor in making publications accessible.
There is sometimes no distinction between the narrative and its representation in the markup. A novel, for example, might consist only of sections, headings and paragraphs which are all marked up in order and can be read in order. These cases tend not to be the norm, however, as most publications will have some degree of complexity to their layout.
More often, publications will include at least some supplementary information, such as footnotes, endnotes, references, sidebars, tables, figures, charts, code samples, warnings, alerts and similar. As this information is interspersed within the content of the body, its markup must inevitably also be interspersed within a content document (e.g., a sidebar may be placed between two paragraphs within a section and the text visually floated around it). If this content is not clearly marked and identifiable as secondary information, users navigating at the markup level will have the primary narrative interrupted as the user agent attempts to play back the auxiliary content.
This problem was particularly acute prior to HTML5, as generic div
tags we used to group
secondary material, which left no way to reliably distinguish its purpose. The result was that users
manually had to try and determine where the content ended in order to continue reading.
To be accessible to non-visual users, content must be marked up such that a logical path that excludes the secondary material and orders the primary can be followed: the logical reading order. Rich markup allows secondary materials to be automatically excluded from text-to-speech playback or refreshable braille rendering if the user doesn't want their reading experience interrupted.
Related Links
- HTML — ARIA Role attribute