What your page does when somebody makes the text bigger

Two different controls

Browser zoom scales everything, including images and spacing. Text-only enlargement changes the font size while the layout stays put.

The second is the harder case and the one that breaks sites, because containers sized for the original text now hold more of it.

Both are common. Device level text size settings on phones do the same thing to any site that respects them.

Device level text settings are the ones most used in practice, particularly on phones and among older readers, and they are the ones least often tested.

The failure that matters

Content forcing the page to scroll sideways. Reading a line then dragging the page across to finish it is exhausting and it is the thing people abandon over.

It usually comes from a fixed width somewhere: a container, a table, an image, or a long unbroken address.

Everything should reflow into the available width. That is the whole requirement and most layouts already do it until something is pinned.

Reading a line and then dragging the page sideways to finish it is exhausting, and it is the behavior people abandon a site over rather than complain about.

Where the breakages hide

Buttons with fixed heights, so enlarged text overflows or is clipped. Cards in a grid that no longer align. Navigation that wraps into the content below it.

Hero sections with text laid over an image are frequent offenders, because the image height was chosen for the original text.

Anything with a fixed height and text inside it is a candidate. Height should follow content rather than the other way round.

• Buttons with a fixed height, where enlarged text overflows or is clipped
• Cards in a grid that stop aligning
• Navigation that wraps into the content below
• Hero sections with text laid over an image
• Tables, which are the commonest cause of sideways scrolling
• Long unbroken addresses or file names
• Anything with a height set in pixels and text inside it

Testing it in thirty seconds

Open a page and use your browser's zoom until the text is roughly double size. Read the page. Then check the width, looking for any sideways scrollbar.

Do the same on a phone with the device text size turned up in settings, which is the setting a lot of people actually use.

You are looking for overlap, clipping and horizontal scroll. Those three cover nearly everything.

Line length and spacing

Enlarged text on a wide screen produces very long lines, which are hard to track. A maximum width on body text helps at every size.

Line spacing matters more as text grows. Tight spacing that looked elegant at small sizes becomes a wall when enlarged.

Readers should also be able to increase spacing themselves without the page falling apart, which is a named expectation in the guidelines.

Readers should also be able to increase spacing themselves without the page falling apart, which is a named expectation in the guidelines.

Do not block it

Some sites disable zoom on phones to stop accidental scaling. That removes the main tool many readers use to read anything at all.

There is no good reason for it on a content site, and it is one of the most cited mobile accessibility faults.

Leave zoom enabled and fix the layout instead.

How ours behave

Pages here use relative sizing and containers that grow with their content, so enlarging text reflows rather than clips.

Every page passes a check that runs before anything publishes, validated against Google Search Essentials and modern web standards, and layouts are checked for sideways overflow at a range of widths.

The test worth doing yourself is the phone one, with your own text size setting, on the page you care most about.

The layouts are checked for sideways overflow across a range of widths before anything publishes, which is where a single fixed-width element shows up.

The resize requirement, as the standard states it

• Text must be resizable up to 200 percent of its size without loss of content or function at level AA W3C, Web Content Accessibility Guidelines 2.2

Figures are from the source named beside each one, as published there. None of them is a claim about this product.