We live in a time where our digital device screen sizes vary. We have 1 inch watch screens, phones, tablets, and even TVs with 100 inch screens. We never know what the end use will be using for a device. Reflow is needed to adapt to many of these screens. However, the core of what reflow is about has little to do with screen size. Let’s look at what we really need to know about 1.4.10 Reflow.
320 by 256
Looking at the WCAG Quickref, we see the following:
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.
Reflow talks about having no loss of functionality without having to scroll in two directions on screens as small as 256 pixels wide. It tells us that when the screen is at 256 pixels wide we can have horizontal scrolling, but not vertical. At 320, we can have vertical but not horizontal scrolling.
As a matter of good web principle, it is better to design vertically than horizontally in the majority of cases. For news, reading, and shopping it is easier to consume the content and it is the expected method of scrolling.
But what does it mean if not mobile?
Remember, we are talking about web content accessibility guidelines. For whatever reason, every time I discuss reflow with developers they automatically think it is for mobile devices. And yes, it benefits everyone on any device when implemented correctly. But so does just about everything listed under WCAG (Not all screen reader techniques benefit the able-bodied). And there is a key word that gets left out during those conversations.
Accessibility
This guideline is about making websites more accessible. Reflow wants to ensure that the site does not hide any functionality when any user is on the site. It should not obstruct, obscure, or remove functionality. This includes when that user adjusts their monitor to a different resolution.
A huge number of people on this planet have issues with vision. For most of them, a pair of glasses will correct it. We’re told by our doctors that 20/20 is the most accurate a human can expect. When a person’s vision reaches 20/200 after correction, they are considered legally blind. They have some vision though and decide to increase the resolution on their screen to read it easier. Likely they may not be aware of screen readers yet. Our volunteer here increases his screen resolution to 300% at which he can read it.
When discussing this addition to the guidelines, 1280×1024 was the most dominant screen size for desktops and laptops. There was also thinking that most disabled people are on fixed income and can’t afford current tech. This lead to thinking the disabled to be on older devices.
If we were to increase our zoom from 100% to 400% starting at 1280×1024, the page is rendered at 320×256. If something requires two way scrolling at this point, you need to revisit the reflow rules. We do not want to remove functionality, but it is ok if functionality goes into a menu or disclosure. We want to stack content in the scroll direction.
There are pieces of content that can have horizontal scrolling including carousels and tables. With carousels, ensure the controls are on the screen, but the contents can overflow. You can swipe, but provide buttons for fallback. For tables, ensure the header column is always visible with at least one other full column.
How to test
I’m not writing to a generic audience here. I hope you have deduced a method for testing, but I won’t leave you hanging. Testing is simple, set you browser viewport to 1280 by 1024. Load the page, then use Control/Command and the plus (+) key until you reach 400% zoom. Review the content to ensure nothing is removed. Make sure content is stacked or hidden by disclosures. Ensure there is no horizontal scrolling. You can flip the dimensions for horizontal scrolling sites.
Alternatively, open your developer tools in mobile emulation. You can leave zoom at 100%. Change the viewport to 320×256.
Have some thoughts or more questions on Reflow? Find me on LinkedIn or Bluesky to keep the conversation going.