Ask the Community
Meaningful visual order
Ensure that the visual layout of elements follows a logical and meaningful sequence. The visual layout should reflect expected task flows (for example, submit buttons should appear after the username and password fields). The layout does not have to strictly be left-to-right or top-to-bottom, but should align with the intended user journey.
A meaningful visual order helps all users understand the relationships between elements and navigate the interface without confusion.
- Rule Category:
Keyboard and Focus Navigation - WCAG 2.1 & 2.2 SC:
1.3.2 (A) - Rule Severity:
Moderate - Supported Platforms and Frameworks :
Android,iOS,React Native,Flutter apps
Success criteria
The specific criteria for success are:
- The visual layout of content follows a logical and meaningful sequence.
- The order of elements does not have to be strictly left-to-right or top-to-bottom, but should reflect the intended task flow.
- The relationships between elements are visually clear and predictable.
AI-powered testing
With AI-powered analysis, App Accessibility Testing evaluates whether the visual layout of elements follows a logical and meaningful sequence. The AI engine flags potential meaningful visual order violations for your review.
The AI engine performs the following check:
-
Identifies visual order violations:
Analyzes whether the visual order is logical and indicates the status as:- Not an issue
- Needs review
- Confirmed issue.
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
To ensure a meaningful visual order and prevent violations, follow these steps:
- Design with a logical flow: Arrange elements on the screen in an order that is visually logical and supports the intended user journey.
- Maintain a consistent order of elements: Ensure the order of elements in the view hierarchy matches their visual presentation on the screen.
- Consider language direction: For languages that are read from right-to-left, ensure the visual layout follows the conventions of that language.
AI-powered fix
You can use the AI-powered suggestions to rearrange UI elements in a way that reflects a logical and meaningful visual order. AI-suggested changes are clearly highlighted in the report for your review.
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 visual order does not follow a logical or expected task flow, causing a meaningful visual order violation.
Fix
To correct this violation:
- Use
LinearLayout,ConstraintLayout, or similar containers to rearrange the UI elements in the layout XML so the Confirm password field appears after the Enter password field. - Check the view hierarchy in the Layout Inspector to ensure it matches the logical visual flow.
- Make sure related elements are grouped together visually and semantically.
The following iOS example scan report highlights an app interface where the visual order does not follow a logical or expected task flow, causing a meaningful visual order violation.
Fix
To correct this violation:
- In Interface Builder or SwiftUI, use stack views, groups, or sections to rearrange the UI elements so that the Signup now! button appears after the input fields.
- Similarly, ensure the Login now! button is positioned after the relevant input fields.
- Check the view hierarchy in Interface Builder or the View Debugger to ensure it matches the logical visual flow.
- Make sure related elements are grouped together visually and semantically.
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
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!