WCAG (Level AA) SC 1.4.4 Resize Text (W3.org)
Issue description
WCAG 1.4.4, “Resize Text” is crucial for people with low vision who may need larger text sizes to comfortably read web content. This guideline focuses on ensuring that users can resize text to make it easier to read without assistive technology.
Many websites have fixed text sizes or layouts that don’t adapt well when users increase the text size in their browser settings. This can lead to:
- Text clipping: Text gets cut off or overlaps other content when resized.
- Horizontal scrolling: Users have to scroll horizontally to read lines of text, making it difficult to follow.
- Loss of functionality: Interactive elements or controls become unusable when text is resized.
WCAG requirements
This guideline requires that text can be resized without assistive technology up to 200% without loss of content or functionality. This means:
- No text clipping or overlap: Text should reflow and adjust to the larger size without any content becoming hidden or obscured.
- No horizontal scrolling: Users should be able to read all text without needing to scroll horizontally.
- Functionality maintained: All interactive elements, like buttons and links, should remain usable at the larger text size.
Essentially, WCAG (Level AA) SC 1.4.4 Resize Text ensures that users have the flexibility to adjust text size to meet their individual needs without encountering barriers or losing access to content. It promotes inclusivity and provides a better user experience for people with low vision.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 2.4.3 Focus Order
- WCAG (Level AA) SC 2.4.7 Focus Visible
- WCAG 2.2 (AA) SC 2.4.11 Focus Not Obscured (Minimum)
- WCAG (Level A) SC 3.2.1 On Focus
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.4.4 “Resize Text” involves ensuring that users can resize text up to 200% without assistive technology and without loss of content or functionality. Here’s how:
Use relative units for font sizes
- em and rem: Use relative units like em or rem for font sizes instead of fixed units like pixels (px). This allows text to scale proportionally with the user’s browser settings. Example:
font-size: 1.2rem;(instead offont-size: 16px;)
Implement responsive design
- Fluid layouts: Use CSS techniques like relative units (percentages, ems) for layout, font sizes, and spacing. This allows content to scale proportionally with the text size.
- Flexible images: Use
max-width: 100%andheight: autofor images to prevent them from overflowing their containers when text is resized. Consider using the<picture>element orsrcsetattribute for responsive images. - Media queries: Utilize media queries in CSS to adjust styles based on screen size and text size. This allows you to optimize the layout for different text sizes.
Avoid fixed-width containers
- Allow text to reflow: Don’t restrict text within containers with fixed widths, as this can prevent text from resizing properly. Allow text to wrap naturally within its container.
Test with browser zoom
- Zoom in: Use your browser’s zoom function to test your website at different text sizes up to 200%. Check for issues: Look for any instances where text is clipped, overlaps other content, or causes horizontal scrolling.
- Test interactive elements: Ensure that all interactive elements, like buttons, links, and form controls, remain usable at larger text sizes.
Provide User Controls (Optional)
- Text size controls: Consider providing users with controls to adjust the text size directly on your website.
- Zoom controls: Offer zoom controls that allow users to zoom in and out of the entire page content.
Example
If you have a website with a fixed-width container for the main content area, you can:
- Remove the fixed width: Remove the fixed width from the container and allow it to adjust to the content.
- Use a flexible grid: Use a CSS grid layout to create a flexible structure that adapts to different text sizes.
- Use media queries: Use media queries to adjust the layout and spacing of elements at different text sizes.
By implementing these techniques, you can ensure that your website is accessible to users who need to resize text, providing a better user experience for everyone.
