Success Criterion 1.3.2 (Level A)
Is the content on your site or application presented in a logical reading order when viewed with assistive technology, an alternate stylesheet, or by keyboard-only navigation?
Why is this Important?
When the reading order provides meaning to the content, the sequence must remain intact. Some people rely on assistive technology or individualized stylesheets to render content. If the reading order presented to the user by an assistive technology or an individualized stylesheet is not correct, the meaning and relationships of the content may not be correctly presented to the user.
Whom does it benefit?
As a person who uses a screen reader,
I want the content presented in a logical reading order
so that I do not misinterpret the meaning and concepts being presented.
Example 2:As a person reliant on keyboard navigation,
I want to be able to tab and use the arrow keys to navigate through the page in the correct reading order,
so that I can comprehend the meaning of the content.
What should you do?
When the sequence in which content is presented affects its meaning, ensure that the reading order matches the visual presentation in the manner intended.
How do you do it?
Here are a few of the many ways you can ensure content reads properly for assistive technology users.
- Reading order should be programmatically determined to maintain a meaningful sequence.
- Separate navigation elements from the content.
Make the DOM (Document Object Model) order match the visual order -
W3C Technique C27
- Ensure that keyboard-only users are able to tab through the content in the intended reading order.
- Turn off the CSS and check that your web page/application displays in the correct order.
- If a Web page contains multiple articles, the order of the articles may not affect their meaning, as long as the content is not interrelated. Provide meaningful sequence to allow non-visual screen reader users to navigate by heading or link lists, so that they are able to find information without needing to scan or read through the entire document.
Need technical guidance?
WCAG Success Criterion 1.3.2
Additional resources to help you:
Present content in a meaningful order
Understanding WCAG 2.0: 1.3.2 – Meaningful Sequence
Example where reading order does not match tab order