You can zoom in 400% without losing content/functionality or horizontal scrolling

Design Notes

Ensure your designs are responsive

For people with moderate visual impairment, it's important to be able to re-size content using browser zoom functions. When users do this on desktop-style browsers they eventually reach mobile size for media queries. Consider how content works in a single column layout and ensure priority content and functionality is operable on smaller screens.

Consider the landscape orientation usage of the small-screen view, and take care with fixed-position elements — do they overlap, obscure or otherwise interfere with using the interface.

For optimal designs across device sizes and orientations it may be that fixed elements such as headers/footers are un-fixed at a certain zoom percentage (e.g. using CSS breakpoints).

More information:

• Interaction Design Foundation: Responsive Design
• NNGroup: Responsive Design

Developer Notes

Ensure the interface is usable when zoomed to 400%

Allow the browser zoom function to increase the size of content to 400% without requiring scrolling in more than one direction (horizontal and vertical). This helps people with low vision. Information and functionality must not be lost for users who are zoomed in.

When using zoom users should be able to view and use all content at an equivalent of 320px wide (e.g. with a 1280px window at 400% zoom).

Some key considerations

• Fixed height containers of text often break when text spacing is changed. Use min-height instead
• Sticky elements, or containers that prevent scrolling, are often unusable at higher levels of zoom in landscape orientation. Use vertical media-queries to make sure there is enough space
• Large data tables are allowed to scroll horizontally, but you should wrap them in an element that contains the scrolling to the table, rather than making the whole page scroll.

Common mistakes

• The text and calls-to-action in website hero (aka Jumbotron) sections at certain zoom percentage due to fixed height container being used

Information and tools

• https://web.dev/responsive-web-design-basics/
• https://alistapart.com/article/dao/

Testing Notes

You can zoom in 400% without losing content / functionality or horizontal scrolling

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.

Steps to check

• In Chrome set the browser width to 1280px
• Press CMD + (CTRL + on Windows) to zoom in
• Zoom in to 400%
• Check for loss of content or functionality at and below 400% zoom

Impact range: High - Critical

Test type: Semi-automated

Tool: ARC Toolkit ('Check page reflow' checkbox)

WCAG Reference: Understanding Success Criterion 1.4.10: Reflow