Two-Dimensional Scrolling

The Two-Dimensional Scrolling rule ensures that content is accessible and readable without requiring scrolling in both the horizontal and vertical directions simultaneously. The content should be readable by scrolling in only one direction at a time. Additionally, the content should not lose information or functionality when zoomed in or viewed at different screen sizes. This is important for users with low vision, cognitive disabilities, and those using screen magnifiers.

Success Criteria

This rule checks whether content can be accessed without requiring simultaneous horizontal and vertical scrolling. The specific criteria for success are:

• If the content requires vertical scrolling, users should not scroll horizontally.
• If the content requires horizontal scrolling, users should not scroll vertically.

How to fix?

To prevent reflow violations:

• Scalable fonts
  Ensure that font sizes adjust based on screen size or user settings. Use relative units, such as sp units, to make fonts scalable with user settings.
• Screen size responsive layouts
  Ensure layouts adapt to different screen sizes. Use ConstraintLayout or RelativeLayout with constraints or percentage-based widths.
• Orientation responsive layouts
  Ensure layouts reflow correctly when switching between portrait and landscape orientations.
• Flexible containers and grids
  Use relative units, such as percentages or em units, rather than fixed units, such as px. Ensure containers use match_parent, wrap_content, or percentage-based units to adapt to different screen sizes.
• Vertical scrolling
  If the page generally requires vertical scrolling, ensure horizontal scrolling is not required to read the content. Use the setVerticalScrollBarEnabled property, or the RecyclerView, or ScrollView layouts, to restrict the content to vertical scrolling only.
• Horizontal scrolling
  If the page generally requires horizontal scrolling, ensure vertical scrolling is not required to read the content by setting the setHorizontalScrollBarEnabled property. Use the canScrollVertically method for validation.
• No loss of content
  Ensure all content remains visible and functional in smaller viewports.

Example

Consider the following example:

Error:

• Both vertical and horizontal scrolling are enabled simultaneously.

How to fix:

• To fix the violation,
  • Use the setHorizontalScrollBarEnabled or setVerticalScrollBarEnabled properties to disable either horizontal or vertical scrolling.
  • Alternatively, use a single-direction scrolling container, such as ScrollView or RecyclerView, to restrict scrolling to one direction.

Reference

• Learn more about Two-Dimensional Scrolling: 2.1 - 1.4.10 (Level AA) guideline
• Learn more about Two-Dimensional Scrolling: 2.2 - 1.4.10 (Level AA) guideline