Zoom to 400 Percent

Before you start

Browser zoom is the assistive technology that needs no download. A lot of people with low vision read everything at 200, 300, or 400 percent, and at 400 percent a normal desktop window is as wide as a small phone. If the page cannot reflow into that width, reading a paragraph means scrolling sideways for every line.

The sample page in the frame has five of the most common mistakes: a fixed-width column, a two-column grid with fixed tracks, a text box with a fixed height, an image with a fixed width, and a sticky header that eats the screen. Each fix is one checkbox. The checks under the frame measure what actually happened.

What you just learned

• max-width, not width. A column that is at most 600 pixels wide shrinks when it must. A column that is exactly 600 pixels wide never does.
• min-height, not height, on anything that holds text. Text gets longer when it gets narrower. A fixed height clips it.
• Grids that collapse on their own. repeat(auto-fit, minmax(14rem, 1fr)) becomes one column when there is no room for two. No breakpoint required.
• Images get max-width: 100% and height: auto. Always. It costs nothing on wide screens.
• Sticky things need a size limit. A 60 pixel header is fine at 100 percent. At 400 percent it is a quarter of the screen that never leaves. Unstick it below a width, or cap its height.

The field note 400 percent zoom is a layout test, not an edge case has the thirty-second test for your own pages. Corpus page 12-document plants the one line that disables zoom altogether.

Embed this lab

Host the Zoom lab on your own page with one element and one script. It runs entirely in the visitor's browser, sends nothing back, and adds a small credit link.

<div data-a11y-world-lab="zoom"></div>
<script src="https://a11y.world/embed.js" async></script>