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.

Define the reading order

Designers often contend with a visual hierarchy when presenting a layout. A visual hierarchy is the structural hierarchy of a layout communicated visually. Larger text near the top communicates it is a heading, we assume a left to right reading in the west, so navigation at the left supports a conventional hierarchy, as two examples.

A reading order tends to follow the visual hierarchy, and it is therefore important to explicitly communicate the reading order to the developers so they can prepare the code to reflect the same order for users of assistive technologies.

Finally, you may find that the WCAG 2.0 requirements talk about meaningful sequence. One definition is that any sequence conveys meaning, and that changing a sequence of the given elements changes the meaning. A web design should have a clear meaningful sequence that if changed reduces the understanding of the content. For the purposes of web design, the visual hierarchy should convey a meaningful sequence, and the reading order should continue the meaningful sequence to users who won't receive the visual information.

Designers are accustomed to managing content in a visually logical manner that is useful for people to understand and navigate. A design is often a spatial arrangement and not a linear one, which can cause difficulties for people with cognitive disabilities like visual comprehension. It may be possible for a design to have a good visual hierarchy, but that visual hierarchy not be clearly apparent to people who cannot easily see it.

For example, a person who uses assistive technology like a screen reader has the webpage read to them in a linear sequence, the order written in code. Defining the visual hierarchy to the developer helps them understand the designer's intent and reflect it in the code order. If the visual order doesn't match the document's structural order, some users may become confused.

A person who uses sight to visually scan a page can reach desired content much more quickly since they can scan straight to the area they're interested in. It is therefore important to assist users who cannot visually scan a page to understand the structure.

One of the methods used to help people with disabilities is to order the content in a meaningful sequence, as recommended in Success Criterion 1.3.2 Meaningful sequence, which states:

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

It is the designer's role to mandate the visual order of the designs and layouts and the developer to ensure the code reflects that visual order. The five images in Example 1 below show different page layouts with the logical order for the user in red arrows.

Example 1:

A diagram of a webpage layout with the logical order show using red arrows.  A diagram of a webpage layout with the logical order show using red arrows.  A diagram of a webpage layout with the logical order show using red arrows.  A diagram of a webpage layout with the logical order show using red arrows.  A diagram of a webpage layout with the logical order show using red arrows.

Applying a strong visual structure helps people with disabilities understand the hierarchy of information and easily discover the framework of your information.

Create repeatable blocks to bypass

It is common knowledge that presenting the main navigation for your website in the same way and in the same location is a good practice. It has many benefits alongside the predictability and consistency it offers. A consistent layout, with consistent navigation elements, makes complying with Success Criterion 2.4.1 Bypass blocks much easier. Example 6 and 7 below from the Web Standards Project website, demonstrates where the "skip to content" link is invisible until the area receives focus, either by mouse or keyboard.

Example 6:

A screenshot from the Web Standards Project website showing the main navigation on the homepage.

Example 7:

A screenshot from the Web Standards Project website showing the main navigation on the homepage and a "Skip to content" link that is visible when it receives focus by mouse or keyboard.

This is a good example because the "skip to content" link is where it should be, at the top of the document and at the top of the webpage, as the first link in the page. Other areas that would benefit from this might be:

  • Bypassing video or audio content for the text transcript.
  • Bypassing secondary and tertiary navigation.
  • Bypassing visual maps for text-based directions or location information.

Match visual order (and focus order) with reading order

As mentioned above, it is important for visual order to match reading order so that users do not become disoriented when navigating a webpage. Success Criterion 2.4.3 Focus order states:

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)

It is important that people who use a keyboard or other similar control devices are aware of the location of focus while navigating a page. When the visual order doesn't match the reading order, their ability to navigate the page diminishes. It is much easier to navigate a page if the user can follow along, but it is harder to follow along if the visual order doesn't match the order in the document or the focus order.

This is particularly important when presenting form fields or functional controls. If a form has two columns of fields, for example, it is important the order of focus makes sequential sense so that fields are offered to the focus order in a meaningful and logical order.

Limit line lengths for good scanability

For some users, a very long line can be difficult to read, as it is much harder to scan across the lengths of text and back to the left to read the next line. Some cognitive disabilities make reading text formatted in this way difficult to follow. Success Criterion 1.4.8. Visual presentation, which is a Level AAA criterion, suggests a line length of 80 characters for optimal scanability. You may find this too severe, particularly if you are not trying to meet Level AAA conformance. We suggest twice this amount (160 characters) might be considered a long line length and that between 95 and 135 characters is a reasonable range if your target is Level AA compliance.

Example 8:

A screenshot of the NSW Division of Local Government Department of Premier & Cabinet website showing text that spans a very wide area.

In Example 8 above, the text in the left image spans a very wide area, which makes it difficult to discover where to continue reading after completing each line. In Example 9 below, the main content area of the webpage has text that is constrained to about 90-95 characters, which is much easier to read.

Example 9:

A screenshot of the Australian Taxation Office website showing text that is constrained to about 90-95 characters.

Multiple ways: predictable layouts

As described in the section above, Create repeatable blocks to bypass, it is important to be consistent across an entire site, to reduce confusion and increase navigability. A predictable layout, which follows common conventions and popular arrangements, will help users understand the structure of the webpage.

Following convention, and repeating patterns across the site makes for a more predictable experience. Success Criterion 2.4.5 Multiple ways requires that there be more than one way to find a resource within a website. This can include a number of features in the design that help with discovering where a desired resource may be located but also, by placing these tools in practical locations, the reading order can be greatly improved.

Example 10:

A screenshot of the NSW Government Transport Roads & Maritime Services website that shows a breadcrumb trail navigation to identify the location of the current page and where it sits among other pages.

In Example 10 above, the breadcrumbs reveal the location of the current page and where it sits among other pages. The navigation at left shows pages within the current section of the site, and there is also a collection of related links at the right. There is also a sitemap link at the bottom of the page (not shown). With this knowledge, the user can approach other pages and be aware of how to find other resources though the predictable and consistent arrangement of elements.

Expose page location among greater site (IA)

It is important to help the user understand something of where they are in a website and where their current location sits among other locations in a website. The first webpage a user encounters on a site is not always the home page or a top level page. Very often, with the indexes available to modern search engines, a user's first exposure may be a page several levels deep within a website, Since every page can be the front door to a web site, and not necessarily from the homepage or a landing page, it is important that the user can:

  • Understand the purpose of the current page they are on
  • Identify the current page in the navigation
  • Where that page sits within the site structure
  • Where that page is among other related pages

An easy to implement feature to most websites are items like sitemaps and breadcrumb trails, both of which help users achieve success with discovering their location within a site. Success Criterion 2.4.8 Location, while being a Level AAA requirement, is, however, very easy to satisfy and, encouraged by their inclusion in a website, help satisfy other requirements and improves the usability of a website for many types of disability. Presenting a breadcrumb trail on each page, or a sitemap link in the footer of every page are both good supplements to the ever-present and consistent navigation at the tops of webpages.

Group related items together in a logical order

Many of the recommendations and suggestions made to satisfy accessibility requirements follow good design principles and as such are relatively easy for designers to comply with. Asking the designer to group related items together and place them in a logical order, both within the grouping and among the greater groupings is already a well-known and well-supported design concept. It is mentioned in two success criteria, Success Criterion 1.3.1 Info and relationships, as well as Success Criterion 3.3.2 Labels or instructions.

This concept is very important for forms and elements in order that related items ascribe meaning to each other by nature of their grouping and that the order of the items make sense when placed in that order.

For example, if asking a user for a delivery address and a billing address, you might consider asking the delivery address first, so that you can add the field "Use these details as my billing address" to the form in the right place in the sequence.

Example 11:

A registration form with several fields: name, email and two sets of address fields, billing address and mailing address. The Billing address fieldset has 4 fields, Address line 1, Address line 2, Suburb/Town, State and Postcode. The Mailing address fieldset is the same, but also has a checkbox labelled "same as billing address."

Placing elements in an order that follows a logical order and supports the relationship between objects will improve the experience of people who depend on screen readers or other assistive technologies but will also reduce errors for other users of the website.

WCAG 2.0 references

Related Techniques for WCAG 2.0