Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- 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.
Who is it for?
This is primarily for users with low vision. Often times they will need to increase the text size to fit their needs. If the page does not reflow (or is not responsive), then the page becomes more difficult for users to interact with. This requires that the content is displayed in a single column without a loss or content or functionality; or requiring the user to scroll the screen in two dimensions.
What is important to know?
The important thing to know is that you have to be able to use a webpage without loss of content or functionality; and without scrolling in two dimensions when the equivalent size of the page is 320px wide (or 256px hight for horizontal scrolling).
On a 1280px viewport, this requires zooming to 400%. On other viewports, the zoom level may be more or less. It is not a 400% zoom requirement, it’s a 320px (or 256px) equivalency requirement. This is an important distinction to make. I’ll expand on this idea in the next paragraph.
The 400% zoom “note” in the WCAG Success Criterion, referenced above, only applies at 1280px width viewports. The “note” is just one easy way that you can test the page. On a 640px wide viewport the page would only have to zoom 200% to meet the 320px requirement. The important value to focus on is breakpoints down to the functional equivalent of 320px. The percentage of zoom is just one way to think about how to “test” it. The percentage will change based on the current width of the browser.
“What if there isn’t enough room place all of the content or functionality at a smaller viewport width? ” The important thing to remember is that the content should be easily reachable. I like to think of this as the “one click (or selection) away” method. The content could be placed in a modal, disclosure or even on a separate page, as long as the method to reach the content is clear.
There are a few exceptions to the “no scrolling in 2 dimensions” rule. Tables, images, maps… etc may not required to flow into a single content if doing so would render the experience useless. Trying to cram a table with 100 columns in to a width of 320px would make the content in each cell unreadable. Scrolling the content in that case would be required to adequately view the content.
How do I code it?
I think in this case, the important thing to look are websites that add/remove/change the view as the site reflows. Ensuring that everything is presented on the page at smaller viewports is important. If that isn’t possible, providing a “one click (or selection) away” method is acceptable.
How do I test it?
The algorythm to understand what percentage the site should be tested at is:
Vertically scrolling page: [Monitor size]/320=[zoom percentage]
Horizontally scrolling page: [Monitor size]/256=[zoom percentage]
Vertical Scroll examples:
1280 = 400% zoom
1600 = 500% zoom
2256 = 700%+ zoom
3200 = 1000% zoom
Thankfully, the ARC Toolkit developed by the Paciello Group provides an easy way to check your site for this. At the bottom of the “Test Groups” pane, there is a “Check page Reflow” checkbox that will resize the page.
- Obtain the screen resolution of your current monitor that you will be testing on. For vertically scrolling websites, we want the “width” value. For horizontally scrolling websites, we want the “height” value.
- Compute your required zoom value using the appropriate algorithm
- Vertically scrolling page: [Monitor size]/320=[zoom percentage]
- Horizontally scrolling page: [Monitor size]/256=[zoom percentage]
- Use your browser’s text resizing (typically CTRL + “+” to increase the text size to the zoom percentage determined in the algorithm. If the algorythm determined that the zoom size is 624% and your browser only increases in increments of 50%, then round up to the nearest value increment.
- Verify that all content that was available at larger viewport sizes is available or “one click (or selection) away” at this viewport size.
- Verify that all functionality that was available at larger viewport sizes is available or “one click (or selection) away” at this viewport size.
- Verify that the screen does not require scrolling in two dimensions (unless the content that is scrolling must be scrolled).
Note: Thankfully, the ARC Toolkit developed by the Paciello Group provides an easy way to check your site for this. At the bottom of the “Test Groups” pane, there is a “Check page Reflow” checkbox that will resize the page. Steps 1-3 may be replaced by using the ARC Toolkit method.