🚀 See how 20+ AI Agents can make your QA faster and smarter. Join 10k+ QAs at global leadership summit! Register Now
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk the Community

Meaningful reading order

Ensure that the screen reader focus order of the elements in your app follows a logical and meaningful reading order. The reading order does not have to match the visual order, but it must remain logical and intuitive for users relying on assistive technology.

A meaningful reading order is crucial for users who rely on screen readers to experience content in the intended sequence and maintain proper context. When the reading order does not align with the logical flow, it can hinder the user’s ability to understand and interact with the app.

  • Rule Category: Keyboard and Focus Navigation
  • WCAG 2.1 & 2.2 SC: 1.3.2 (A), 2.4.3 (A)
  • Rule Severity: Serious
  • Supported Platforms and Frameworks : Android, iOS, React Native, Flutter apps

Success criteria

The specific criteria for success are:

  • The screen reader focus order follows a logical and meaningful sequence.
  • The order of focusable elements is predictable and supports the user’s understanding of the content structure.
  • All screen reader-focusable elements, not just interactive elements, must follow a meaningful and predictable sequence.

AI-powered testing

With AI-powered analysis, App Accessibility Testing evaluates whether the screen reader reading order is logical and meaningful. The AI engine flags potential meaningful reading order violations and provides actionable insights for review.

The AI engine performs the following checks:

  • Issue classification: Analyzes whether the screen reader focus order is logical and indicates the status as:
    • Not an issue
    • Needs review
    • Confirmed issue.
  • Suggests remediation:
    • Identifies the elements that break the sequence.
    • Provides details about the elements, from the Accessibility Tree, and their screen positions.
    • Explains why the elements break the sequence and offers suggestions for remediation.

For more information about how BrowserStack App Accessibility Testing uses AI to improve app accessibility, refer to the AI-enhanced testing page.

How to fix

You can fix violations manually or by applying the AI-powered fix.

Manual fix

  • Set the focus order: Set the focus order of elements to ensure that the screen reader focus moves through elements in a logical and predictable order.
  • Test with real screen readers: Ensure that the focus order is logical by testing your app with actual screen readers.
  • Ensure localization support: Verify that the reading order is appropriate for different languages or localized apps, especially for right-to-left (RTL) languages, such as Arabic or Hebrew.

Platform-specific implementation

To ensure a meaningful reading order for assistive technology users, follow these steps:

  • Make sure the order of elements in the view hierarchy matches the intended reading order for screen readers.
  • Use the following attributes to set the focus order:
    • android:accessibilityTraversalBefore: Specifies which element should receive focus before the current element.
    • android:accessibilityTraversalAfter: Specifies which element should receive focus after the current element.
  • Verify that the UIAccessibilityElements array is in the correct order so that VoiceOver follows the intended reading sequence.
  • Ensure that all focusable elements are included in the array and ordered logically to match the intended reading flow.
  • Ensure that the order of elements in the component tree matches the intended reading order for screen readers.
  • Avoid using absolute positioning or z-index changes that disrupt the logical reading order for assistive technology users.
  • Use the following properties to control focus navigation between elements:
    • nextFocusForward: Moves focus to the specified element when advancing forward.
    • nextFocusUp: Moves focus to the specified element when navigating up.
    • nextFocusDown: Moves focus to the specified element when navigating down.
    • nextFocusLeft: Moves focus to the specified element when navigating left.
    • nextFocusRight: Moves focus to the specified element when navigating right.
  • Ensure the order of widgets in the widget tree matches the intended reading order for screen readers.
  • Use FocusTraversalGroup to group related widgets and control traversal within groups.
  • To set a custom order:
    • Wrap each focusable widget with FocusTraversalOrder.
    • Set the order argument to control the order in which widgets receive focus.
    • Use NumericFocusOrder or LexicalFocusOrder as needed.
  • Avoid absolute positioning or stack order changes that disrupt the logical reading order.

AI-powered fix

You can use the AI-powered suggestions to ensure the screen reader focus order of the elements in your app follows a logical and meaningful reading order.

The AI engine only generates the suggestions. You must manually review and implement the suggestions in your codebase using the steps mentioned in the Manual fix section.

Examples

The following Android example scan report highlights an app interface where the elements do not follow a logical reading order, causing a meaningful reading order violation.

The App Accessibility issue details window with a meaningful reading order violation.

Fix

To correct this violation:

  • Use the android:accessibilityTraversalBefore and android:accessibilityTraversalAfter attributes to set the focus traversal order of the elements to match the intended reading order.

The following iOS example scan report highlights an app interface where the elements do not follow a logical reading order, causing a meaningful reading order violation.

The App Accessibility issue details window with a meaningful reading order violation.

Fix

To correct this violation:

  • Set the accessibilityElements property to ensure the screen reader focus follows the intended reading order.

References

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

  • ON THIS PAGE

    Is this page helping you?

    Yes
    No

    We're sorry to hear that. Please share your feedback so we can do better

    Contact our Support team for immediate help while we work on improving our docs.

    We're continuously improving our docs. We'd love to know what you liked





    Thank you for your valuable feedback!

    Talk to an Expert
    Download Copy Check Circle