Zooming obscures content

WCAG Level

Level AA

Priority

High

Pages/screens/components affected

• Navigation
• RTL
• Video
• Audio - amp-story background audio
• Audio - amp-story-page background audio
• Audio - amp-story using amp-audio
• Animation
• Sharing
• Tooltip
• Page attachment
• Branching
• Consent
• Prerender - Image
• Prerender - Video
• AMP Story Player - Player
• AMP Story Player - AMP Story 360

Description

Browsers have functionality that lets people zoom in on the page, enlarging all of the content in equal proportion. If zoom hasn't been taken into consideration when designing the page, it can result in content overlapping or being obscured.

All tested samples display a "Expand the height/the width/both the height and width of your window to view this experience" message (rather than any of the actual page content) when the CSS dimensions of the viewport fall below particular thresholds (width above 768 CSS px and below 1024 CSS px, height below 550 CSS px, and possibly other combinations/ratios). As zooming in desktop browsers (to magnify/increase the size of the content) also changes the reported CSS width/height of the browser's viewport, this means that users that use zoom, as well as users that have a desktop environment running at a lower resolution, may end up seeing these "door slam" messages rather than the page content.

For instance, the pages are currently not usable for a user running a browser at 1920x1080 at 200% zoom (the requirement for WCAG 2.1 Success Criterion 1.4.4 Resize Text (Level AA)).

Further, this also leads to a failure of WCAG 2.1 Success Criterion 1.4.10 Reflow (Level AA) - while content does "reflow" to 320 CSS px width, this only holds true if the height of the viewport is relatively high. For the actual use case that lies at the core of the success criterion - low vision desktop users that need the ability to view content even at high zoom factors such as 400% on a small 1280x1024 screen - all samples fail, since they show the "Expand both the height and width..." message instead of the page content.

User impact

When content is hidden when the page is viewed at zoom, it means someone with low vision who depends on zoom functionality to be able to read the content will not be able to do so.

Required solution

Make sure that page content responds well to changes in zoom levels. In particular, make sure that page content does not overlap itself or get clipped when resized.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.

Implementation guidance

While it may be technically complex, AMP stories should ensure that they present users with content/functionality even in a small viewport.

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:

1. Open the page in a browser.
2. Zoom content to at least 200%.
3. Check that all content and functionality is available without being obscured or overlapped.
4. Set the size of the browser to a "standard" desktop size (approximately 1280px wide).
5. Zoom content to at least 400%.
6. Check that the content reflows to a single column and that it can be viewed without both horizontal and vertical scrolling being necessary.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the website has been tested for the same issue.
• All issues identified throughout the rest of the website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 1.4.4 Resize Text (Level AA)
• WCAG 2.1 Success Criterion 1.4.10 Reflow (Level AA)

More information

• W3C: Using a technology that has commonly-available user agents that support zoom
• W3C: Technique F102: Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed
• Knowbility: Exploring WCAG 2.1: 1.4.10 Reflow

Test data

Test date: January 2021
Website: