Reading order and focus order: accessibility for designers

  • Author: Access iQ ®
  • Date: 4 Mar 2015
  • Access: Premium

Quick facts

Designers must be able to demonstrate how their designs dictate a logical order, and to demonstrate how people with disabilities will experience it.

  • Provide ways to help users navigate, find content, and determine where they are
  • Users of assistive technology don't "scan", they use headings, links, landmarks
  • Dynamic elements should still follow a logical order
  • Identifying landmarks helps users understand the structure
  • Include visual and logical cues to users
  • Match visual order (and focus order) with reading order
  • Limit line lengths for good scanability
  • Expose page location among greater site (IA)
  • Group related items together in a logical order

Screen readers are linear

For users of assistive technologies like screen readers, it is important that the reading order of the webpage follows the logical and visual order of the page. It is therefore important for the designer to be able to demonstrate how their designs dictate a logical order, and to demonstrate how people with disabilities will experience it.

Users of assistive technology don't "scan", they use headings, links, landmarks

One method people with disabilities use to navigate a webpage is by using some of the features of screen readers. These include:

  • Using a key to navigate by links and form fields.
  • Navigating by headings.
  • Following WAI-ARIA landmarks.
  • Using shortcut keys to skip-over or skip-to elements on the page.

Dynamic elements should still follow a logical order

Some websites have content that changes or is presented differently based on some pre-existing condition, user input, or random arrangements. Regardless of the content changes or variations, a person with disabilities should be able to understand the relationships between the elements presented.

For example, in a dynamic form, if the user is presented with different address fields based on selecting a country from a list, the choice of countries should be presented first. The logical order should match the reading order in all instances.

Identifying landmarks helps users understand the structure

Whereas designers spend a great deal of effort balancing the visual elements it is often a matter of opinion and speculation for developers to translate a design into functioning code for the browser. If the designer can identify the reading order and content flow of the page, and the hierarchy of the elements in the design, it helps the developer apply a semantic structure in code.

Include visual and logical cues to users

Presenting content in a logical order to users helps them understand where they are and where to go to next. Visual cues like spacing or proximity between objects; text and icon size, borders and other visual cues help people visually understand the context and characteristics of information.

These visual cues can have a corresponding semantic relationship in the resulting code for users of assistive technologies to make use of.

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: