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.
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.
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.
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.
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.
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.
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
- Success Criterion 1.3.2 Meaningful sequence
- Success Criterion 2.4.1 Bypass blocks
- Success Criterion 2.4.3 Focus order
- Success Criterion 2.4.8 Location (Level AAA)
- Success Criterion 1.4.8. Visual presentation (Level AAA)
Related Techniques for WCAG 2.0
- G57: Ordering the content in a meaningful sequence
- G1: Adding a link at the top of each page that goes directly to the main content area
- G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
- G124: Adding links at the top of the page to each area of the content
- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
- H4: Creating a logical tab order through links, form controls, and objects
- G65: Providing a breadcrumb trail
- G63: Providing a site map
- G128: Indicating current location within navigation bars