Note: The creation of this article on testing Reflow was human-based, with the assistance on artificial intelligence.
Explanation of the success criteria
WCAG 1.4.10 Reflow is a Level AA conformance level Success Criterion. It requires that content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions, when viewed at a width equivalent to 320 CSS pixels (typically a small mobile screen). This ensures that users can zoom in or use devices with smaller screens without encountering horizontal scrolling or content cut off the screen.
The goal is to support users with low vision, those using screen magnification, or mobile users by making content responsive and readable without needing to scroll side-to-side or lose access to key features. Exceptions are allowed for parts of content where two-dimensional layout is essential, such as maps or complex data tables.
Example of a Reflow failure
When you narrow the browser window to 320 CSS pixels (or zoom in to 400% on a desktop), and you have to scroll horizontally to read entire lines of text or see all of the main content. The web page has both horizontal and vertical scrollbars. This is highly disorienting and makes reading incredibly difficult.
Who does this benefit?
- People with low vision who use screen magnifiers or zoom functionality to enlarge content.
- Users with cognitive disabilities, who may find it easier to read content in a simplified, single-column layout.
- Mobile users and people on smaller screens by reducing the need for horizontal scrolling.
Testing via Automated testing
Automated tests are excellent for quickly checking for responsive design breakpoints, identifying fixed-width elements, and flagging content that overflows its container at common viewport sizes. They can rapidly pinpoint patterns that might prevent proper reflow, making them incredibly useful for initial assessments or large-scale audits. Think of them as your first line of defense, efficiently sifting through a lot of content to catch obvious issues.
However, automated methods simply can’t do it all. They often fall short when it comes to simulating zooming, accurately replicating how users interact with screen magnifiers, or truly determining if horizontal scrolling leads to a loss of content or functionality.
Testing via Artificial Intelligence (AI)
AI-based testing offers some fantastic advantages when you’re tackling WCAG 1.4.10 Reflow. It’s incredibly efficient at analyzing how your content adapts across different viewport sizes, simulating everything from zoomed-in desktop views to tiny mobile screens. This helps quickly spot common reflow headaches like overlapping elements, hidden content, or those frustrating instances where users are forced into horizontal scrolling. Plus, AI can identify consistent layout issues across many pages, making large-scale assessments far more efficient than relying solely on manual checks.
While AI-based testing is a powerful ally, it’s important to recognize its limitations. AI might struggle with context-specific exceptions, such as interpreting when a two-dimensional layout (think maps or charts) is intentionally static. It can also miss subtle, nuanced problems like partially cut-off text, oddly wrapped content, or interactive elements that become unusable at certain zoom levels.
Testing via Manual testing
Manual testing offers invaluable insights into how your content truly behaves when users zoom in or view it on smaller screens. While automated tools are great for catching common issues, they often miss subtle but critical problems like unwanted horizontal scrolling, cut-off content, or overlapping elements that only become apparent with a human eye. Plus, manual checks are essential for evaluating interactive components and dynamic layouts, ensuring all functionality remains accessible without frustrating two-dimensional scrolling. It’s about making sure your site doesn’t just look right, but works right for everyone, every time.
While powerful, manual testing isn’t without its hurdles. It can be quite time-consuming and, without clear guidelines, potentially inconsistent. Testers often need to juggle multiple viewport sizes and zoom settings across various browsers and devices, which can really eat into resources. There’s also the challenge of subjective judgment; what one tester considers perfectly usable, another might find problematic. To ensure consistent, reliable results, it’s vital to have well-defined criteria guiding your manual testing efforts.
Which approach is best?
No single approach for testing 1.4.10 Reflow is perfect. However, using the strengths of each approach in combination can have a positive effect.
Ensuring compliance with WCAG 1.4.10 Reflow requires a comprehensive testing approach that blends automated, AI-driven, and manual methods. This multi-faceted strategy guarantees efficiency and accuracy in detecting accessibility barriers. Automated and AI-powered tools provide quick detection of common layout issues. They efficiently identify problems like fixed-width elements, overlapping content, or unintended horizontal scrollbars at standard breakpoints. Some AI solutions can even simulate responsive behavior across devices, catching structural failures early in the process. While AI tools streamline testing, manual validation is crucial for confirming real-world responsiveness and usability. Since AI may miss subtle issues or dynamic content behaviors, manual checks are essential. Testers must verify proper text reflow by zooming to 400% in a desktop browser or viewing content on a 320px-wide screen. This ensures all functionality remains available and that no horizontal scrolling is required.
In many cases, a human tester may use an automated tool of sorts to make testing manually easier. For instance, ARC Toolkit provides a an easy option to quickly set the browser at 400% percent.
