Publications typically have a primary narrative that readers 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, readers
navigating at the markup level will have the primary narrative interrupted as the reading system 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 readers
manually had to try and determine where the content ended in order to continue reading.
To be accessible to non-visual readers, 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.
To establish the logical reading order, you need to ensure all of the following:
that all complex structures like lists, tables, figures, code samples and the like been properly tagged
using the appropriate structural elements;
that the section and aside elements have been appropriately applied to groupings
of primary and secondary content, respectively;
that the appropriate semantics have been applied to all elements to disambiguate their use;
that the order of content within the markup accurately reflects the natural reading order (i.e., CSS is
not being used to reposition elements in a different sequence for visual readers than can be found in the
scripted links, if present, only enhance standard links, interactive puzzles and games are not required to
be solved to move on, etc.).
Although creating the logical reading order is not a complicated requirement, it typically requires manual
inspection of your markup. The determination of which content is primary to the narrative flow and which
secondary can only be reliably determined by a human, so a successful validation report from a tool like epubcheck, while helpful, is only a good start.
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 left
to the reader 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 reading systems typically provide the option for readers to select elements to ignore.
Semantic markup eases this process of identifying and skipping non-essential content. A reader 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.