Content is in a logical order in the code
Design Notes
None
Developer Notes
Ensure content is ordered logically in the source code
A logical order of source code will ensure that blind and partially sighted users can understand the meaning and relationships of content as their keyboard focus moves through the page. Generally screen reader users will navigate content in a left-right, top-bottom order.
A simple way to ensure a logical focus order on the page is to keep consistency between the order of elements displayed on screen and the order for these elements in the source code (DOM).
Testing Notes
The order of the content makes sense and preserves relationships
The order of content presented to a screenreader (usually source code order) makes sense
Steps to check
- Open the web page
- Turn off Cascading Style Sheets (CSS) to remove any visual styling:
- You can do this easily using the Web Developer extension in Firefox or Chrome — select CSS > Disable All Styles
- Check that when compared to the page with CSS turned on, the order in which the content is presented would not affect the meaning of the information and cause confusion or disorient users
- Note: if sections such as the main navigation, main content, or sidebar are in different relative positions compared to the styled page, but this doesn't affect understanding of page meaning, then this is a pass.
Impact range: Medium
Test type: Manual
Tool:
WCAG Reference: Understanding Success Criterion 1.3.2 Meaningful Sequence