reflow-4x-zoom-scroll

Ensures that users don’t have to scroll vertically and horizontally at the same time to view content at 400% zoom.

Description

Users with low vision can access content better when zoomed in. If users have to scroll both vertically and horizontally to read the entire content when zoomed in, they might find it difficult to access information. The reflow-4x-zoom-scroll rule ensures that content can be enlarged up to 400% zoom without losing functionality or needing two-dimensional scrolling.

Modern browsers can handle the zoom-in function without distorting content. However, you need to create your website in an architecture that supports these features.

Example

In the following recording of a simple website, you need to scroll both vertically and horizontally to access the entire content when zoomed 400%.

Such a need for two-dimensional scrolls makes the experience difficult for users with low vision.

In contrast, the following recording demonstrates a redesigned version of the website in which you can access the entire content by scrolling in one direction (vertically), even when zoomed-in 400%.

You can use responsive designs on your websites and test them on multiple browsers and devices to ensure adherence to the reflow-4x-zoom-scroll rule.

How to fix?

• Design your website such that the content is presented in a single column when zoomed in up to 400% (Vertical scrolling content at a width equivalent to 320 CSS pixels and horizontal scrolling content at a height equivalent to 256 CSS pixels).
• Use media queries and grid CSS to reflow columns.
• Fix any text and image overlap when zoomed in up to 400%.
• Fix any overlap of text input elements with other elements till 400% zoom.
• Fix any part of the content that goes beyond the viewport till 400% zoom.

Reference

• WCAG 1.4.10: Reflow (Level AA)
• Technique C32: Using media queries and grid CSS to reflow columns