a11yTips

Organize content in a sequential reading order that remains logical

no. 044

Make sure the reading order remains meaningful, regardless of technology

While content is usually organized so it makes sense visually, it is not unusual to notice this logical order falling apart when the same content is accessed through alternative means, such as when using assistive technology. For instance, while the visual presentation might suggest a specifically intended reading order for sighted users (such as going from one column to the next in a form), the order in which content ends up being consumed could be radically different for someone who is using a screen reader or simply tabbing through active elements. Imposing a specific logical sequential order is irrelevant: what matters is, regardless of the context in which content is consumed, that the resulting reading order makes sense to users in their browsing context.

To do this, simply make sure that the sequence in which content is presented to the user is logical to everyone, including users of assistive technologies. This implies the reading order might end up being different based on setting. Despite common belief, it is perfectly fine for a document to have more than one logical sequential reading order, as long as within any given context, the reading order provided still makes sense. Doing so will ensure the content remains perceivable as intended, regardless of the technology used to access the information. Arguably, sticking to the natural source code order is usually a reliable way to achieve this, but it is in no way mandatory.

User Story

As a user, I want to make sense of the content and how it is presented, so that I can consume it efficiently, regardless of the tools I am using.

Simple Code Example

Not Applicable

Testing Methodology

Using the Web Developer toolbar for Firefox, select the “Linearize Page” test under “Miscellaneous” and make sure the order of content yields the same meaning as the original or a meaning that ultimately still provides the same information.

Specification Details