1.4.10 Reflow
Content remains readable and usable without requiring horizontal scrolling when viewed at 320 CSS pixels wide (typically equivalent to a mobile viewport) by adapting layout and reflowing text.
What is it?
Web content should adjust dynamically and without needing to scroll in two directions across screen sizes or when users zoom in on browsers. At 400% zoom, content should reflow to fit within the width of the viewport without going missing or becoming unusable. The viewport is the visible area of a web page, and it’s the window through which users view the content.
This success criterion ensures that page layouts can be enlarged and reflowed up to 400% zoom without loss of content or functionality, except for parts of the content requiring two-dimensional scrolling, such as maps, data tables, and toolbars.
Why does it matter?
When content doesn’t reflow, users with low vision can struggle to read it. Scrolling horizontally to read each line adds significant cognitive and physical effort, making the experience frustrating or sometimes unusable. Reflow makes sure that content stays visible and usable even at high magnifications or small screens.
People with low vision or mobility impairments, those using screen magnifiers, or users on small devices can benefit from content that reflows since it avoids hidden information and awkward navigation.
Who is affected?
People with low or limited vision. People with motor impairments. And people using mobile devices.
People with low vision often need to enlarge text to see it clearly, and without reflowing, the zoomed-in content may fall out of the viewport, forcing these users to scroll horizontally to read each line.
People with motor impairments or limited motor skills may struggle to scroll horizontally to see hidden content since it requires precise movements.
People on mobile devices or smaller screens benefit from reflow because it makes sure that content adjusts to the smaller viewports, making it easier to navigate without excessive scrolling or zooming.
How to implement 1.4.10
Make sure the page content reflows when zoomed to 400%, presenting information in a single column without horizontal scrolling for vertical languages or vertical scrolling for horizontal languages. Test your content at 400% zoom on both desktop and mobile browsers to confirm compliance.
Responsive Web Design Techniques
Design with flexibility in mind by:
- Using CSS
@mediaqueries - Using relative measurements
- Using CSS
overflowandwrapproperties - Using CSS
max-widthandheightfor images - Avoiding
fixed-widthlayouts orabsolutepositioning
CSS Media Queries
Media queries allow you to create responsive designs and layouts that adapt to different specified screen sizes. Using breakpoints, you can choose what screen size you want to serve alternate styling. This comes in handy when:
- Switching between multi-column to single-column content
- Adjusting font sizes for text and headings
- Hiding non-essential elements that clutter smaller screens
- Applying the other techniques listed below
In this media query example for mobile devices with screen sizes smaller than 768px, the font-size for the body text is adjusted, a sidebar widget is hidden, and a container element is adjusted to display only one column.
@media (max-width: 768px) {
body { font-size: 1.2rem; line-height: 1.6; }
.sidebar-widget { display: none; }
.container { grid-template-columns: 1fr; }
}
Relative Measurements
For scalable designs, replace fixed units like px with relative units like em, rem, %, vw, and vh. These units adjust proportionally based on the user's settings or viewport size.
CSS Overflow and Wrap Properties
Use overflow, overflow-wrap, white-space, text-overflow strategically to manage content that might spill outside the viewport. This helps avoid forcing horizontal scrolling by ensuring content wraps within its container, especially when dealing with long text strings or large amounts of text.
overflow: Control what happens when the content exceeds its container’s boundaries.overflow-x/overflow-y: Control overflow behavior separately for horizontal and vertical axes.overflow-wrap: Make sure text breaks onto a new line instead of overflowing its container.text-overflow: To handle text that overflows its container by adding visual indicators like ellipses…white-space: Controls how whitespace inside an element is handled
In the example below, the text is set to a fixed width of 200px, and we use a few overflow-related properties to neatly handle any extra text. The white-space property keeps the text on a single line, overflow hides anything that doesn’t fit, and text-overflow adds ellipses to show the text has been truncated.
.truncated-text {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="truncated-text">
This is an example of a very long sentence that will be truncated with an ellipsis when it overflows.
</div>
Visible output:
This is an example of a very lo...
Avoid Fixed-Width or Absolute Positioning
Avoid hardcoding widths or positioning elements or layouts absolutely, which can prevent reflow. Instead, use flexible layouts with flexbox or grid and relative dimensions.
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
CSS max-width and height For Images
With CSS max-width and height, images can resize to fit the space without losing their proportions. Responsive layouts and smart sizing make sure images stay in their spot, even in single-column layouts or when zoomed in.
Optional Horizontal Scrolling
If horizontal scrolling is unavoidable, provide an option for users to switch to a layout without horizontal scrolling for reading lines of text. It’s also acceptable to design content, like spreadsheets, where scrolling is required to view additional columns, as long as individual columns are fully visible without scrolling.
Conclusion
Reflow is key for accessibility, letting users zoom in on content without losing access or dealing with too much scrolling. Using responsive designs, testing at 400% zoom, and sticking to relative units makes your content way more inclusive and easy for everyone to use.
