Reading order and focus order: accessibility for developers

  • Author: Access iQ ®
  • Date: 1 Feb 2013
  • Access: Premium

Quick facts

Web developers use a variety of techniques to control the layout of a webpage, some of which have the unintended effect of making the content inaccessible to people with disabilities.


  • Ensure order also conveys meaning
  • Reading order and tab order should be the same as the display (visual) order
  • The sequence in which elements receive focus must reflect the intent and meaning of the page content

Web developers use a variety of techniques to control the layout of a webpage, some of which have the unintended effect of making the content inaccessible to people with disabilities. There may be conflicting reasons for doing so, whether advised to by the SEO expert, or the need to have something further down the document appear higher up the page for other business reasons.

Developers enjoy a challenge and have helped to explore ways to present the order and location of content on the page differently to how it appears in the HTML. For example, the design may have a site wide page structure of a header section surmounting a left sidebar, a main column and a right sidebar, with a footer underneath.

One thought might be to structure the layout by using a table. While using tables for layout goes against the principle of separating content from presentation, WCAG 2.0 does not directly say that you can't or shouldn't use a table for layout in this way — as long as certain conditions are met. Thankfully, these days using tables for layouts are considered bad practice and low quality. But a developer may still think of ordering the content containers in a visual order rather than a logical order.

Order also conveys meaning

The diagrams demonstrate the difference between a visual order and a logical order.

Diagram demonstrating visual order of a webpage that assumes the reading order is: header, left, main content, right, footer.Diagram demonstrating logical order of a webpage that assumes the reading order is: header, main content, left, right, footer.

The diagram on the left assumes the order is: header, left, main content, right, footer.

The diagram on the right assumes the order is: header, main content, left, right, footer.

Although the left diagram seems like a convenient way to order the containers within the document, the diagram on the right is a better conceptual model of how the content should be ordered. It places the main content higher up in the flow and assumes the left panel should precede the right panel.

What a developer needs to understand is that people with disabilities who use assistive technologies like screen readers heavily depend on the content order because these technologies heavily depend on the logical order conveyed in the document.

Guideline 1.3 Adaptable states:

Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

A related concern is ensuring that the order in which focus moves from element to element on the page in response to keyboard commands maintains not just a logical sequence, but also one that accurately conveys the intended meaning of the content.

A person using a keyboard to tab through the focusable elements on a webpage needs these to be presented in a sequence that preserves the meaning of the content on the page as a whole.

Reading order

Many screen readers can now convey table content to users cell by cell (some older models are only able to read line by line across the page), but they can only read out those cells left-to-right across and down the page. As there are far fewer webpages using tables for layout, this is a decreasing issue, but one to remember when presenting tabular data to users, which is discussed in more detail in the topic on tables, data and information for developers. What is important to remember is that screen readers read a document linearly.

When the reading order and tab order is the same as the display order no extra steps need to be taken to make the content accessible. It is when a change in the reading order affects how users perceive the meaning of the content that accessibility becomes an issue.

For example, a table might have two columns, the first row of which has an image of a painting in each cell. The next row of the table has the painting's title and its artist in the corresponding cells under each painting. When viewed through a graphical browser, the effect is of a pair of paintings with an informative caption under each.

A screen reader, however, would read out the alternative text (alt text) for the first painting, then the alt text for the second painting, then the caption for the first painting and then the caption for the second painting. The meaningful association between each painting and relevant caption is lost because the screen reader does not convey the relationship established visually by the table.

A more logical method would be to put each painting and caption in a separate div, with the caption following the image for a more logical presentation.

Example 1:

<div class=”paintingcontainer”>

<h2>Painting title</h2>

<img src=”filename.jpg” alt=”Brad Pitt by Damien Hurst” />

<p>This painting of the famous actor Brad Pitt was recently sold for several million dollars</p>

</div>

<div class=”paintingcontainer”>

<h2>Painting title</h2>

<img src=”filename.jpg” alt=”Bette Davis by Francis Bacon” />

<p>This little known masterpiece was recently sold as a part of the late actress’ son’s estate</p>

</div>

Using cascading style sheets (CSS) to position the div elements on the page is a more efficient presentation of the logical order than a table in this case.

Success Criterion 1.3.2 Meaningful sequence states:

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)

Using CSS to position the page elements allows the content to maintain the correct reading sequence. This is where the principle of separating content from presentation becomes more than a theoretical exercise or a philosophy — it is fundamentally pragmatic.

Focus order

Success Criterion 2.4.3 Focus order states:

Focus order: If a webpage can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

People with impaired vision may rely on "tabbing" through a webpage, using the tab key to move in sequential order through the interactive elements on a webpage.

To satisfy Success Criterion 2.4.3, the sequence in which elements receive focus must reflect the intent and meaning of the page content.

For example, in the case of a form that has a field for a first name followed by a last name, the tabbing order should proceed from the first field to the second.

That might sound obvious, but imagine a scenario where the field for the first name is positioned above the field for the last name, while to the right of the first name field is a link to an unrelated page, perhaps an advertisement in a sidebar.

Default keyboard tabbing will move from the first name field to the advertisement link and then to the last name field, disrupting the logical flow and destroying the intended meaning.

Note: the focus order might not be the same as the reading order, and it might not need to be in order to be accessible. The sequence of interactive elements accessed by tabbing must be logical and meaningful in itself, but that functionality might be different from the meaning delivered by the logical and meaningful sequence of text.

What does matter is that in both cases, meaning and functionality is made equally available to people using assistive technology.

Tab order

In a very few situations, you might find that you need to force focus to move between elements in a specified way to ensure functionality and meaning is maintained.

This might be because the natural reading and focus order has been unavoidably skewed by other focusable elements on the page. The tabindex attribute can be used to set a tab order.

  <form action="http://www.accessiq.org/submit.htm" method="post">

    <label for="name">Name</label>

    <input type="text" id="name" tabindex="1"/>

    <input type="submit" id="submitform" tabindex="2" value="Submit" />

  </form>

The tabindex attribute provides a sequential numerical value which ensures a correct tab order, starting with the input field, followed by the submit button, then followed by all other focusable objects on the page in the order they appear.

There is no difference in appearance, but a screen reader will follow the imposed tab order and allow a screen reader user to move focus sequentially from the input field to the submit button.

The tabindex attribute should only be used if there is no other way to maintain focus order. While it is a handy way to impose a tabbing order and maintain a desired logic, that may still take the user by surprise and should therefore by used with caution.