Content stays in the right order to keep context without styling
Ensure that the order in which content is presented is meaningful and correctly maintained, so that users, including those using assistive technologies, can understand the content as intended.
Acceptance Criteria
• Correct Reading Sequence: The sequence in which content is presented should reflect its logical and meaningful order.
• Programmatic Determination: The correct reading order can be programmatically determined and should be preserved even when visual styling changes.
• Assistive Technology: Screen readers and other assistive technologies should present content in the intended order, regardless of how it is styled or arranged visually.
Examples
• Good: A webpage with a multi-column layout uses proper HTML structure (e.g., <div>, <article>) so that screen readers can read the content in the intended sequence.
• Bad: A webpage with visually arranged content (e.g., columns) that does not use appropriate HTML elements or ordering, causing screen readers to present the content out of order.
Exceptions
• Purely Decorative Content: Content that is purely decorative and does not convey essential information may not need to follow the same reading order as functional content.
• Complex Layouts: Some complex layouts might use scripting to alter content presentation dynamically; ensure that the reading order is still maintained programmatically in these cases.
Tips
• Use semantic HTML and proper ARIA roles to ensure content is read in the correct order by assistive technologies.
• Test content in different layouts (e.g., multi-column) and ensure that screen readers present it in the intended order.
• Consider the impact of dynamic content changes and ensure that the reading sequence is maintained when elements are added or modified.
How to test?
1. Code Review: Verify that HTML structure and ARIA roles are used correctly to define the logical reading order of the content.
2. Assistive Technology Check: Use screen readers to test how the content is read in various layouts and ensure it follows the intended sequence.
3. Layout Test: Adjust visual styling and layout (e.g., scale elements, change columns) and confirm that the content is still presented in the correct order by assistive technologies.