WCAG (Level AA) SC 1.4.10 Reflow

WCAG (Level AA) SC 1.4.10 Reflow (w3.org)

Issue description

WCAG 1.4.10, “Reflow” addresses the need for web content to be easily readable and usable when users zoom in on the page. It requires that content can be zoomed up to 200% without requiring users to scroll horizontally to read lines of text or lose access to any content or functionality.

Many websites have fixed-width layouts or elements that don’t adapt well to zooming. This can lead to:

Horizontal scrolling: When zoomed in, lines of text become too long to fit on the screen, forcing users to scroll horizontally to read them. This disrupts the reading flow and makes it difficult to follow the content.
Content clipping: Elements or parts of the content might be cut off or hidden when zoomed in, making them inaccessible to users.
Overlapping content: Elements might overlap each other when zoomed in, making it difficult to understand the content or interact with the page.
Loss of functionality: Interactive elements, like buttons or form fields, might become unusable or difficult to access when zoomed in.

Why this matters

Low vision: People with low vision often rely on zooming to enlarge text and other content to make it easier to see.
Cognitive disabilities: Some users with cognitive disabilities may benefit from zooming in to focus on specific parts of the content.
Mobile device users: Users on small screens might zoom in to see details more clearly.

Essentially, this guideline ensures that content remains accessible and usable even when users adjust the display to suit their needs. It promotes inclusivity and provides a better experience for everyone, regardless of their visual abilities or device preferences.

Who this issue impacts

Follow the links for additional information on user impairments:

Suggestions for remediation

Remediating WCAG 1.4.10 “Reflow” involves ensuring that your web content can be zoomed up to 200% without requiring horizontal scrolling or loss of content or functionality. Here’s how:

Implement responsive design

Fluid layouts: Use CSS techniques like relative units (percentages, ems) instead of fixed units (pixels) for layout, font sizes, and spacing. This allows content to scale proportionally with the screen size and zoom level.
- Example: width: 80%; instead of width: 960px;.
Flexible images: Use max-width: 100% and height: auto for images to prevent them from overflowing their containers when zoomed. Consider using the element or srcset attribute for responsive images to provide different image sources for various screen sizes.
Media queries: Utilize media queries in CSS to adjust styles based on screen size, orientation, and resolution. This helps optimize the layout for different devices and zoom levels.

Avoid horizontal scrolling

Test thoroughly: Test your website at different zoom levels (up to 200%) to ensure no horizontal scrolling is required to read text or access content. Use your browser’s zoom functionality or developer tools to simulate different zoom levels.
Content wrapping: Ensure text wraps naturally within its container, avoiding overflow that necessitates horizontal scrolling.
Layout adjustments: Use CSS techniques like flexbox or grid layout to create flexible and adaptable layouts that reflow content effectively at different zoom levels.

Optimize text

Relative font sizes: Use relative units (e.g., ems, rems) for font sizes, allowing users to resize text in their browser settings without breaking the layout.
Avoid fixed-width containers: Don’t restrict text within containers with fixed widths, as this can prevent text from resizing and reflowing properly.

Tools and resources

Browser developer tools: Use your browser’s developer tools (e.g., Chrome DevTools) to simulate different screen sizes and zoom levels for testing.
Responsive design checkers: Utilize online tools to analyze your website’s responsiveness and identify potential reflow issues.

Example

Instead of this:

CSS
.container {
width: 960px;
}

p {
font-size: 16px;
}

Use this:

CSS
.container {
width: 90%;
max-width: 1200px;
}

p {
font-size: 1.2rem;
}

This revised code uses relative units for container width and font size, allowing the content to scale proportionally with screen size and zoom level.

By implementing these techniques, you create a more accessible and user-friendly website that adapts to individual user preferences and needs, ensuring everyone can access and understand your content, even at higher zoom levels.