EPUB 3 Accessibility Guidelines

Logical Reading Order

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:

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.

Example

Example 1 — Semantic markup to enable the discovery of the logical reading order

The narrative flow in the following textbook excerpt is obvious to sighted readers who can distinguish the images and sidebar it flows around from visual cues.

Sample textbook page showing figures and asides surrounding the narrative

The logical reading order would be established using figure tags to offset the images and an aside for the sidebar, as in the following markup:

<div epub:type="pagebreak">43</div>

<figure>
   <img src="img01.jpg" alt="…"/>
   <figcaption>
      Figure 2.2: Neurons transmit information to 
      other neurons. Information passes from the 
      axon of the presynaptic neuron to the 
      dendrites of the postsynaptic neuron.
   </figcaption>
</figure>

<p>
   The site where a presynaptic terminal ends in 
   close proximity to a receiving dendrite is 
   called the 
   <dfn epub:type="keyword">synapse</dfn>. 
   The cell that sends out information is called the 
   <dfn epub:type="keyword">presynaptic</dfn>
   neuron, and the cell that receives the 
   information is called the 
   <dfn epub:type="keyword">postsynaptic</dfn>
   neuron. It is important to note that the synapse 
   is not a physical connection between the two 
   neurons; there is no cytoplasmic continuity 
   between the two neurons. The intercellular space 
   between the presynaptic and postsynaptic neurons 
   is called the <dfn epub:type="keyword">synaptic 
   space</dfn> or <dfn epub:type="keyword">synaptic 
   cleft</dfn>. An average neuron forms 
   approximately 1,000 synapses with other neurons. 
   It has been estimated that there are more
   synapses in the human brain than there are stars 
   in our galaxy. Furthermore, synaptic connections 
   are not static. Neurons form new synapses or 
   strengthen synaptic connections in response to 
   life experiences. This dynamic change in neuronal 
   connections is the basis of learning.
</p>

<figure>
   <img src="img02.png" alt="…"/>
   <figcaption>
      Figure 2.3: The synapse is the site where 
      chemical signals pass between neurons. 
      Neurotransmitters are released from the 
      presynaptic neuron terminals into the 
      extracellular space, the synaptic cleft or 
      synaptic space. The released neurotransmitter
      molecules can then bind to specific receptors 
      on the postsynaptic neuron to elicit a 
      response. Excess neurotransmitter can then be 
      reabsorbed into the presynaptic neuron through 
      the action of specific reuptake molecules 
      called transporters. This process ensures that 
      the signal is terminated when appropriate.
   </figcaption>
</figure>

<div epub:type="pagebreak">44</div>

<p>
   The brain contains another class of cells called 
   glia. There are as many as 10 to 50 times more 
   glial cells than neurons in the central nervous 
   system. Glial cells are categorized as microglia 
   or macroglia. Microglia are phagocytic cells that 
   are mobilized after injury, infection, or 
   disease. They are derived from macrophages and
   are unrelated to other cell types in the nervous 
   system. The three types of macroglia are 
   oligodendrocytes, astrocytes, and Schwann cells.
   The oligodendrocytes and Schwann cells form the 
   myelin sheaths that insulate axons and enhance 
   conduction of electrical signals along the axons.
</p>

<p>
   Scientists know less about the functions of glial 
   cells than they do about the functions of
   neurons. Glial cells fulfill a variety of 
   functions including as
</p>

<ul>
   <li>
      support elements in the nervous system, 
      providing structure and separating and 
      insulating groups of neurons;
   </li>
   <li>
      oligodendrocytes in the central nervous 
      system and Schwann cells in the peripheral 
      nervous system, which form myelin, the sheath 
      that wraps around certain axons;
   </li>
   <li>
      scavengers that remove debris after injury 
      or neuronal death;
   </li>
   <li>
      helpers in regulating the potassium ion 
      (K+) concentration in the 
      extracellular space and taking up and 
      removing chemical neurotransmitters from 
      the extracellular space after synaptic 
      transmission;
   </li>
   <li>
      guides for the migration of neurons and for 
      the outgrowth of axons during development; and
   </li>
   <li>
      inducers of the formation of impermeable tight 
      junctions in endothelial cells that line the 
      capillaries and venules of the brain to form 
      the blood-brain barrier.<a epub:type="noteref"
      href="#fn03">3</a>
   </li>	
</ul>

<aside epub:type="sidebar">
   <h3>The Blood-Brain Barrier</h3>
   
   <p>
      The blood-brain barrier protects the neurons 
      and glial cells in the brain from substances 
      that could harm them. Endothelial cells that 
      form the capillaries and venules make this 
      barrier, forming impermeable tight junctions.
   </p> 
   
   <p>
      Astrocytes surround the endothelial cells 
      and induce them to form these junctions. 
      Unlike blood vessels in other parts of the 
      body that are relatively leaky to a variety 
      of molecules, the blood-brain barrier keeps 
      many substances, including toxins, away from 
      the neurons and glia.
   </p>
   
   <p>
      Most drugs do not get into the brain. Only 
      drugs that are fat soluble can penetrate the 
      blood-brain barrier. These include drugs of 
      abuse as well as drugs that treat mental 
      and neurological illness. The blood-brain 
      barrier is important for maintaining the 
      environment of neurons in the brain, but it 
      also presents challenges for scientists who 
      are investigating new treatments for brain 
      disorders. If a medication cannot get into 
      the brain, it cannot be effective. 
      Researchers attempt to circumvent the 
      problems in different ways. Some techniques 
      alter the structure of the drug to make it 
      more lipid soluble. Other strategies attach 
      potential therapeutic agents to molecules 
      that pass through the blood-brain barrier,
      while others attempt to open the blood-brain 
      barrier.<a epub:type="noteref"
      href="#fn04">4</a>
   </p>
</aside>

Compliance References and Standards

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 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.