Why does all content need to be available while a page is zoomed in?
Question
Answer
Many sites are built to change their layout when a page is zoomed in with a browser to allow for a better experience on a mobile device. Often, this adjustment includes removing content from the page to increase the visual presentation and reduce clutter. Without considering what this means for web accessibility and equality, this may seem totally reasonable — especially if the content that is lost is seen as non-essential. But upon taking a deeper dive into the purpose of the WCAG Success Criteria 1.4.4: Resize Text and 1.4.10: Reflow, it becomes clear that there is more to it than just “What is best for styling.”
The end goal for ensuring that content isn’t lost while zoomed in is often perceived as “Is it the same experience for all users at the given zoom level?” which is a good start (meaning, the “same experience for all users” part). But not everyone will experience the site at the same zoom level, and users who require the site to be zoomed in at all times will not have the same experience or access to information as those who do not need to zoom in. So, it is important to ensure that the same content is available at the required zoom levels and page widths (covered in the following “Summary” section). Following these criteria also improves mobile compatibility, which provides a better user experience for users on mobile devices too.
Summary
In order for a site to be compliant with the WCAG Success Criteria 1.4.4: Resize Text and 1.4.10: Reflow, all content must still be available on the page (without losing meaning) at both 200% zoom and at 400% zoom (with a page width of 320 pixels at 400% zoom). The end goal is to ensure that all users have access to the same information and have as close to the same experience as possible, regardless of what zoom level they operate at.
The Guided Manual WCAG Audit Tool from Accessible Web includes a step to automatically prepare your viewport to review content at different zoom levels, which can help you check whether content is being lost.
Remediation Recommendations
Ensure that content is adaptable and responsive to changes in page width and zoom. Many methods can be used to achieve this, such as moving information into expandable accordions while on high zoom levels or on mobile devices. This will hide the clutter but still allow users to access the same information.
If the content being lost is considered non-essential anyway, consider removing it from all instances of the page, no matter what aspect ratio or zoom level it is set to.
