Reflow content to avoid scrolling in 2 directions
Ensure that content can be enlarged without requiring scrolling in both directions. This means text should reflow within the viewport, making it accessible to users who need larger text.
Acceptance Criteria
• Vertical Scrolling: Content must fit within a width of 320 CSS pixels without horizontal scrolling.
• Horizontal Scrolling: Content must fit within a height of 256 CSS pixels without vertical scrolling.
• Exceptions: Content requiring two-dimensional scrolling, like maps, diagrams, presentations, data tables, and games, is not subject to this requirement.
Examples
• Place navigation menus behind a button if they do not fit on the screen.
• Adjust text size so it fits within the viewport without horizontal scrolling.
Exceptions
• Maps, diagrams, presentations, data tables, and games where two-dimensional scrolling is necessary for usability or meaning.
Tips
• Use responsive design techniques to ensure content adapts to various screen sizes.
• Consider user preferences and needs when designing content layouts.
How to test?
1. Resize Browser: Enlarge the text and check if content fits within the viewport without needing horizontal and vertical scrolling.
2. Check Functionality: Ensure all interactive elements and content remain accessible and functional when text is enlarged.
3. Review Content: Identify if any content requires two-dimensional scrolling and verify its necessity.