Meaningful reading order

Ensure the visual layout and focus traversal order of the app content follow a logical flow. The layout should generally follow a left-to-right, top-to-bottom pattern.
A meaningful reading order is crucial for users who rely on assistive technologies to experience content in the intended sequence. When the content order does not align with the visual presentation or logical flow, it can cause confusion and hinder the user’s ability to understand and interact with the content.

Success criteria

The specific criteria for success are:

• The visual layout of content should follow a left-to-right, top-to-bottom order unless the language requires a different reading direction (for example, languages that are read from right-to-left). In such cases, even if the order deviates, the sequence should still be logically consistent and predictable.
• The view hierarchy must align with the visual layout and logical reading sequence.
• The focus traversal order, which is the order in which interactive elements receive focus, must follow the visual and logical flow.
• All screen reader-focusable elements, not just interactive elements, must follow a meaningful and predictable sequence.

How to fix

To ensure a meaningful reading order and prevent violations, follow these steps:

• Design with a logical flow: Arrange elements on the screen in an order that is visually and semantically logical. Consider how a user would naturally progress through the content.

• Maintain a consistent order of elements: Ensure the order of the accessibility elements in the view hierarchy matches their visual presentation on the screen.
  To set the focus traversal order:
  • On iOS, use the accessibilityElements property.
  • On Android, use the android:accessibilityTraversalBefore and android:accessibilityTraversalAfter attributes.

• Verify focus traversal: Ensure the screen reader focus moves through interactive elements in a logical and predictable order that aligns with the visual layout.

• Consider language direction: For languages that are read from right-to-left, ensure the visual layout and focus traversal order follow the conventions of that language.

Examples

References

• 1.3.2 Meaningful Sequence (Level A): WCAG 2.1 · WCAG 2.2
• 2.4.3 Focus Order (Level A): WCAG 2.1 · WCAG 2.2