The importance of Reflow in mobile accessibility
You should make your web content accessible on mobile devices. But how, and more importantly, why?
Back when WCAG 2.1 was released, a few additional success criteria were added specifically to address mobile accessibility. This is because the mobile Internet barely existed pre-iPhone, when WCAG 2.0 was released.
Even if you’re not focused on accessibility (newsflash: you should be), you’re probably already considering it in your day-to-day work.
For the SEO and UX-focused among you, you’re very likely already making your websites responsive – meaning they automatically resize and arrange content on multiple screen sizes.
Well this is actually part of WCAG 2.1.
Reflow is a WCAG 2.1 success criterion that ensures text appears in one column on mobile devices. This prevents the need for two-dimensional scrolling (i.e. users should only be able to scroll up and down, or left and right, but not both).
Why is two-dimensional scrolling an issue?
Globally, 1 billion people have a vision impairment that could have been prevented or has yet to be addressed [Source: WHO].
From an accessibility standpoint, users with low vision, physical impairments, or cognitive impairments should not be forced to scroll in two dimensions to read the text.
Users should also be able to enlarge the text without affecting the above. On a mobile device, this is usually accomplished with ‘pinch-to-zoom’.
When you read, your eyes track from one side of the screen to the other, then move to the next line. It’s a natural flow and should require minimal thought and effort to accomplish.
But if the text continues off the side of the screen, your user has to perform two additional actions:
- Physical – Scroll across to see the text
- Cognitive – Remember which line you were on before scrolling back to the beginning
It’s not only annoying, but it also makes your site entirely unusable for a good percentage of your users.
Something else to consider is that 2D scrolling also occurs if you have a fixed-width image, table, video, or other media somewhere on your page that’s wider than the current screen width.
You should make sure that you constrain media sizes to their parent container.
What’s the law on Reflow?
Reflow is a level AA WCAG 2.1 requirement. The EU Web Accessibility Directive requires your website to pass this success criterion. The Americans with Disabilities Act (ADA) and any of the other worldwide accessibility standards are also influenced by WCAG.
As it’s an AA requirement, if you don’t implement it then you are in breach.
Indeed, the Government Digital Service in the UK is currently testing UK council websites against the EU Web Accessibility Directive.
We’ve had conversations with a number of people who’ve said, “Two-dimensional scrolling has been found as an issue on our website, but our accessibility partner has not highlighted it.”
Why is this the case? It’s likely to be because of the way the site is being tested.
How do you test for 2d scrolling and pinch-to-zoom?
You can take two approaches. Test manually or test automatically. As with most accessibility work, combining both is good practice.
The guidelines state that 2d scrolling should not occur at a resolution of 320 by 256 CSS pixels. This is the equivalent of an iPhone 5 screen.
There are two approaches to manual testing for two-dimensional scrolling.
- Use a real device
- Use browser developer tools to simulate screen sizes
Your manual procedure for a real device would be as follows:
- Power on iPhone 5
- Load Safari
- Navigate to the web page you want to test
- Move your fingers around the screen and see if you can scroll both up and down, and left and right
- Open Chrome
- Repeat steps 3 and 4
- Open Firefox
- Repeat steps 3 and 4
- Open Opera
- Repeat steps 3 and 4
- Navigate to the next page you want to test
- Repeat steps 4-11 for the total number of pages you want to test
Ok, this is obviously quite a contrived example, but it hopefully illustrates the workload required. Imagine following this procedure for 1,000 web pages.
Using developer tools in your favorite browser is another option if you don’t have a real device, but this doesn’t reduce the amount of work.
This is a lot of effort that you don’t have time for.
Your automated WCAG tool should solve this problem, and if it doesn’t, you should find another solution.
Silktide detects two-dimensional scrolling automatically. Instead of analyzing only the HTML code on your site (the stuff you’d see if you right-click and “View Source” in your web browser) Silktide actually loads your page in a real browser.
This means Silktide can experience your website as an end-user would. It’s a much more accurate method.
It’s because of this that we’re able to detect issues with two-dimensional scrolling.
Silktide also checks whether ‘pinch-to-zoom’ has been disabled in CSS. It’s usually enabled by default so this is only going to happen if it’s been disabled on purpose.
Without pinch-to-zoom, your users can’t make the text bigger.
At Silktide we take the view that manual testing is useful for finding issues that can’t be determined by a computer on a relatively small sample of pages.
Automated tests, on the other hand, are very useful for coverage of your entire website for all unambiguous criteria in WCAG (i.e. those that are not subjective).
The quality of automated testing can vary across vendors, so we encourage you to example sample reports and technologies before purchase.
Accessibility-first, not mobile-first
‘Mobile first’ has been around as a concept for a long while. It’s the notion that all web design should start with the mobile user, and expand to desktop users with increasing complexity.
It’s not surprising, as mobile users now comprise 57% of global Internet traffic (December 2020).
Mobile is not an afterthought. It’s most of your users.
Web development teams typically design and build websites on computers with large monitors.
Your users are typically viewing them on mobile devices with small screens.
I mentioned earlier that WCAG requires you to test each and every web page to the equivalent screen size of an old iPhone 5.
This is not because all your users own iPhone 5s. It’s because your users own larger phones which are zoomed in to the equivalent of an iPhone 5 screen.
The key thing to remember is that ‘responsive web design’ is ‘accessible web design’. As long as you take this approach for all device sizes, you’ll create a better user experience for everyone.