Navigation at 200% zoom: menus for visitors who enlarge text

Key takeaways

Many visitors zoom in or enlarge text, and menus are often the first thing to break: items overlap, wrap or disappear. WCAG 2.2 requires text to resize to 200% without loss of content and pages to reflow at a 320 CSS pixel width, equivalent to 400% zoom on a typical laptop. At high zoom, the site should switch to the mobile menu cleanly.

• WCAG 2.2 requires text to resize to 200% without loss.
• Pages must reflow at 320 CSS pixels wide, about 400% zoom.
• At high zoom, the mobile menu should appear cleanly.
• Never disable pinch zoom on phones.

Who zooms in on websites?

People with low vision, older visitors and anyone on a small screen in bright light or without their glasses. Some set a larger default text size in their browser or phone; others zoom page by page. They are a meaningful share of visitors, and many do not think of themselves as disabled.

• How clear website navigation improves user experience
• Mobile websites for older customers: what to change

What does WCAG 2.2 require?

Two success criteria cover zoom. 1.4.4, Resize Text, requires text to resize up to 200% without loss of content or function. 1.4.10, Reflow, requires content to work at a width of 320 CSS pixels without scrolling in two directions, which is roughly 400% zoom on a 1,280 pixel wide screen. Both are level AA.

• Accessible navigation: clearer for every visitor

What breaks in menus when visitors zoom?

Menus built with fixed sizes break first. Each of these hides navigation from someone who needs larger text.

• Menu items overlapping or wrapping onto the logo.
• Items cut off at the right edge.
• Dropdowns opening off screen.
• Sticky headers filling half the screen.
• The mobile menu not appearing at high zoom.
• Pinch zoom disabled on phones.

• Website scrolls sideways on mobile? Causes and fixes
• Sticky headers: helpful or in the way?

How do you test it?

On a laptop, zoom the browser to 200% and then 400% and use the menu. At 400% the layout should be the mobile one, with no sideways scrolling. Also set the browser's default text size to large. On a phone, pinch-zoom the header and check it is allowed.

What about sticky headers at high zoom?

A sticky header that takes 15% of the screen at normal size can take half of it at 400%. Make sticky headers stop sticking, or shrink, at high zoom or small heights, so content stays readable and focus is not hidden behind them.

What does this look like in practice?

A pattern we see: at 200% zoom, a site's seven menu items overlap the logo and the header action disappears off the right edge. Letting the menu switch to the mobile layout as soon as it stops fitting fixes zoom and narrow screens at once.

• See client work
• Website Design & Development for UK businesses

Zoom checklist

• Test the menu at 200% and 400% zoom.
• Mobile menu appears when the full menu stops fitting.
• No sideways scrolling at 320 CSS pixels.
• Sticky header shrinks or releases at high zoom.
• Pinch zoom allowed on phones.

• Responsive navigation: when the full menu should collapse
• Mobile accessibility: the WCAG checks for small screens

Next step

Press Ctrl and plus four times on your homepage and try to use the menu.