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.

Premium Content

Premium content is available to users that have a current subscription to the content.

This topic is part of our premium content range. To access it, you need a 12-month premium subscription — but let’s put that in perspective. How many hours will you waste if you try to find free information on the internet? And how can you be sure that free info is correct? Or comprehensive? Or specific to your role?

With a premium subscription, you get virtually everything you need, all in one place. All you need to do is follow the information provided, and you’ll know you’re covered.

Each subscription includes:

  • A year of content updates — Premium content is updated regularly, and you get all of those updates for free.
  • Professional support — Ask questions or request further information from an Access iQ™ specialist.
  • Access to Q&A — See the questions and answers submitted by other premium subscribers, so you remain up-to-date on the accessibility challenges faced by others in the industry.

Unlock this content: