Loading...
Loading content...
Loading content...
Content must reflow to fit 320px width without horizontal scrolling.
Why it matters: Users with low vision who zoom in need content to reflow so they don't have to scroll horizontally to read.
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: (Level AA) Vertical scrolling content at a width equivalent to 320 CSS pixels; Horizontal scrolling content at a height equivalent to 256 CSS pixels. Except for parts of the content which require two-dimensional layout for usage or meaning.
What This Means: This success criterion requires that content can be presented at a width of 320 CSS pixels (equivalent to a small mobile device) without requiring horizontal scrolling. Content should reflow vertically to fit the narrow width, ensuring users who zoom in or view on small screens don't need to scroll horizontally to read.
Why It's Important: Users with low vision often zoom in significantly, which effectively creates a narrow viewport. If content doesn't reflow, they must constantly scroll horizontally to read, which is difficult and frustrating. Mobile users also benefit from content that reflows properly on small screens. This criterion ensures a better experience for all users who need to view content in narrow spaces.
Use responsive design techniques with flexible layouts. Avoid fixed-width containers that exceed 320px. Use CSS media queries to adjust layouts for narrow widths. For wide content like tables, provide horizontal scrolling within a container rather than requiring page-level horizontal scrolling. Test by resizing the browser to 320px width and verifying no horizontal scrolling is needed.
This criterion ensures that users with low vision can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that mobile users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
A wide table requires horizontal scrolling at 320px width, breaking the layout.
<table style="width: 800px;">
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
</table>A table that stacks or scrolls horizontally within a container at narrow widths.
<div style="overflow-x: auto;">
<table style="min-width: 100%;">
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
</table>
</div>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.4.10 Reflow are met. Check off items as you complete them.
Note: These are official W3C resources for 1.4.10. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.4.10 Reflow correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.4 Distinguishable