Enlarged text cut off by fixed-height boxes
A header with a fixed height and hidden overflow cannot grow when the text gets bigger, so part of the menu is cut off.
The problem
People who enlarge text can't read, or see where they are on, the part of the page that is cut off.
A stationery shop's header holds the logo, six links (Pens, Paper, Gift sets, Workshops, Journal, Contact) and the cart. At the default text size they sit on one row. Someone who reads with larger text sets the browser's font size to 200%. The links no longer fit on one row, so they wrap onto three. The header is still 80 pixels tall and centres its contents, so only the middle row shows: the rows above and below it are cut off. Pressing Tab still moves focus to those links, but the focused link can't be seen, and nothing on the screen says where it went.
The header has height: 80px, chosen to match the design, and overflow: hidden, added to crop a background pattern. Enlarged text needs more height, but the box can't grow, so everything past 80 pixels is cut off and there is no way to scroll to it. Success criterion 1.4.4 asks that text can be resized to 200% without losing content or function. Here both are lost: the links can't be read, and the ones that can still be reached by keyboard can't be seen.
People with low vision who enlarge text rather than zoom the whole page, so the layout stays wide enough to read. Older readers who set a larger default font size once and leave it. Keyboard users at that size, who Tab onto links that are off the visible edge of the header. On a phone, the same header can clip at the default size, because a narrow screen wraps the links too.
Most scanners load the page once, at the default size, where everything fits. axe has no rule for it. A probe has to enlarge the text, then compare each box's height with the text inside it. AI fixes often go wrong in one of three ways. Deleting overflow: hidden alone leaves the fixed height in place, so the extra rows spill out over the content below and overlap it. overflow: auto turns the header into a small scrolling box. text-overflow: ellipsis hides even more of the text.
Try it
Enlarge the text to 200% and read the menu.
Drag the Text size slider. Can you still read every link in the header?
Autumn notebooks are in
Hand-bound, 120 pages, in four colours.
A recreated demo. The broken version is intentionally inaccessible.
The fix
Swap the fixed height for a minimum height, and fold the links into a menu if the header must stay on one row.
- 1Give anything that holds text a min-height, or no height, never a fixed one.
- 2Don't hide overflow on text; clip decoration on an element of its own.
- 3If the links must stay on one row, fold them behind a menu button, not out of sight.
html
<header class="site-header"> <a href="/" class="logo">Inkwell & Co</a> <nav aria-label="Main"> <ul class="site-nav"> <li><a href="/collections/pens">Pens</a></li> <li><a href="/collections/paper">Paper</a></li> <li><a href="/collections/gift-sets">Gift sets</a></li> <li><a href="/pages/workshops">Workshops</a></li> <li><a href="/blogs/journal">Journal</a></li> <li><a href="/pages/contact">Contact</a></li> </ul> </nav> <a href="/cart" class="cart">Cart (2)</a></header>css
.site-header { display: flex; align-items: center; gap: 24px; height: 80px; padding: 0 24px; overflow: hidden;}.site-nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none;}.cart { margin-left: auto; }At 200% the links need two or three rows, but the header stays 80 pixels tall and hides the rest. The links are still in the page and in the tab order, so focus moves onto text nobody can see.
The header keeps its 80 pixels at the default size and grows when the text needs more. At 200% the links wrap onto more rows and the header grows to hold them, so every link is visible and every focused link can be seen. The HTML doesn't change. If the background pattern needs cropping, crop it on an element of its own (see Implementation decisions).
Both options keep every link readable and reachable at 200%, and both meet 1.4.4. Letting the header grow is two lines of CSS with nothing to maintain, so start there. Its cost shows on a sticky or fixed header: two or three rows of large text can take a third of a laptop screen and stay there while people scroll. Folding the links keeps the header short at any size, which suits a sticky header or a design that must stay on one row, but it adds a script and a menu that has to be kept working. If your theme already has a menu button for small screens, folding is mostly a matter of triggering it by fit rather than by screen width.
Find the other fixed heights. The header is rarely the only one. Look for height, max-height and line-height in pixels on anything that holds text: announcement bars, buttons, badges, card titles, tab rows. line-height: 80px, used to centre a link vertically, makes every wrapped row 80 pixels tall; centre with align-items and padding instead.
Units alone don't fix it. A height in rem or em (technique C28) grows with the text, but only in proportion. When zoom narrows the page, or a translation is longer, the links wrap onto more rows than the box was sized for, and the extra rows are cut off again. Relative units help only while the number of lines stays the same.
Clip decoration, not text. If something must be cropped, crop it on an element that holds no text: a pseudo-element or a wrapper for the background. overflow-x: clip crops sideways only and still lets the box grow; overflow-x: hidden does not, because it turns the other axis into a scroll box.
Offsets that assume the old height. A position: fixed header usually comes with body { padding-top: 80px }, and sometimes scroll-padding-top: 80px or a sub-menu at top: 80px. Once the header can grow, those hide content under it. Prefer position: sticky, which keeps its place in the flow, or set the offset from the header's measured height.
Folding and focus. If the links fold while one of them has focus, close the menu and move focus to the menu button, or the focus is lost. Close the menu on Escape and return focus to the button. A theme's existing small-screen drawer usually does this already.
Line clamps. A clamped excerpt whose full text is one click away is a design choice; a clamped price, label or menu item is lost content.
Don't block zoom. A viewport tag with user-scalable=no, or a maximum-scale below 2, stops people pinch-zooming on a phone, which fails 1.4.4 on its own. Use <meta name="viewport" content="width=device-width, initial-scale=1"> and nothing more.
Verify the fix
5 checks, no mouse.
Test with: Zoom, Keyboard
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the shared header or theme settings change.
Limits
This is a starting pattern, not a guarantee for every application. Strictly, 1.4.4 can be met by full-page zoom alone, but many people enlarge text only, and a box that clips then also clips at zoom when the page is narrow. Paths and class names in the snippets are placeholders. Test every page template, not only the header.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
Keep this fixed as your code changes.
Turn guides like this into rules your coding agents and CI follow, then have the result retested with a keyboard and screen readers.