Loading...
Loading content...
Loading content...
Ensure text can be zoomed to 200% without breaking the layout or hiding content.
Why it matters: Users with low vision need to enlarge text to read it.
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
What This Means: This success criterion requires that text must be resizable up to 200% using browser zoom controls (not assistive technology) without losing content or functionality. This means layouts must be flexible enough to accommodate larger text sizes, and content must not be cut off, hidden, or become unusable when text is enlarged.
Why It's Important: Users with low vision often need to enlarge text to read it comfortably. If layouts break or content gets cut off when text is zoomed, these users cannot access the information. Fixed-width containers, overflow:hidden, and non-responsive designs often fail this criterion because they don't adapt to larger text sizes.
Use responsive design techniques with relative units (em, rem, %) instead of fixed pixels. Avoid fixed-width containers that don't expand. Use max-width instead of width for containers. Ensure horizontal scrolling doesn't occur at 200% zoom. Test by zooming the browser to 200% and verifying all content remains accessible and functional. Avoid using images of text when possible, as they don't scale well.
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 older 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.
Text in a fixed-width container gets cut off when zoomed to 200%.
<div style="width: 300px; overflow: hidden;">
<p>This text will be cut off when zoomed...</p>
</div>Text in a responsive container reflows and remains readable at 200% zoom.
<div style="max-width: 100%;">
<p>This text will reflow and remain readable when zoomed.</p>
</div>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.4.4 Resize text are met. Check off items as you complete them.
Note: These are official W3C resources for 1.4.4. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.4.4 Resize text 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