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.