Magnified Failures: A Reflow Audit Routine for UK Council Homepages

UK council homepages are asked to do an enormous amount: advertise bin collections, explain council tax, open a housing repair journey, promote a consultation, satisfy a legal notice and point residents towards social care. At normal size, the result can look orderly. At 400% zoom, it often becomes a narrow column of clipped buttons, off-screen menus and horizontal scrolling. The page has not necessarily failed an automated scan. It has failed the everyday test of reflow.

What the 400% zoom test actually asks

The relevant standard is WCAG 2.2 Success Criterion 1.4.10 Reflow. In plain English, content must be usable at a narrow width without requiring two-dimensional scrolling. For most content, that means no horizontal scrolling while reading down the page. The benchmark is a width equivalent to 320 CSS pixels, which corresponds to a desktop viewport of 1280 pixels viewed at 400% zoom. Maps, complex data tables and similar content that genuinely requires two-dimensional layout are treated as exceptions, but the rest of the page should still reflow.

This is not the same as checking a mobile view. Zoom enlarges text and interface elements together, often exposing fixed widths, absolute positioning and hover-dependent navigation that a responsive breakpoint has hidden on small screens. A council site can look acceptable on a phone and still fail a resident who magnifies a desktop browser.

Where council homepages come apart

The failures tend to cluster around the same components. A fixed-width wrapper holds the page at 960 or 1200 pixels, so the magnified viewport shows only the left-hand slice. A mega menu opens beyond the right edge, leaving its final column unreachable. A cookie banner has a fixed height and an absolutely positioned close button that disappears when text is enlarged. A sticky header and alert bar consume most of the viewport, leaving a sliver for the service information the resident came for.

Navigation traps are especially common. Keyboard focus may move into a submenu that is visually off-screen, causing the browser to scroll sideways. The skip link may be clipped before it receives focus. A carousel may expose controls that sit outside the visible column. Search fields and service finders often use inline labels and side-by-side buttons that cannot wrap, so the button is pushed out of view. Emergency notices, consultation banners and chat widgets add further layers of fixed positioning.

None of these problems is exotic. They are the predictable result of designing a homepage as a wide canvas and treating narrow widths as an afterthought.

A repeatable audit routine

A reflow audit does not need to be complicated, but it does need to be consistent. The following routine can be run by a content editor, designer, developer or accessibility specialist, provided the evidence is recorded in the same way each time.

1. Prepare a clean desktop browser at 1280 by 1024 pixels. Set zoom to 400%. Where possible, use a fresh profile with extensions disabled so that toolbars do not distort the result.
2. Select the journeys that matter. Start with the homepage, then test the top tasks: bins, council tax, housing, social care, planning, libraries, road reports and contact. Include search results, a service landing page, an online form and the accessibility statement.
3. Inspect the first view. Can the cookie banner be dismissed? Is the close control visible? Does an emergency alert push the main content away or overlay it? Are header links and the search control still usable?
4. Walk the page with a keyboard. Press Tab from the top and record the focus order. Look for focus that disappears off-screen, menus that cannot be closed, and any point where the page scrolls horizontally because focus has moved outside the narrow column.
5. Read the column. Check for clipped headings, truncated button labels, images that overflow, form fields that cannot be seen in full and text that overlaps other content. Confirm that no information is lost, not merely that the page still loads.
6. Check for horizontal scrolling. Scroll sideways deliberately. If the main content requires horizontal movement to read or operate, record it as a reflow failure unless the content falls within a genuine exception.
7. Test forms and interactive components. Labels should remain associated with inputs, error messages should be visible, multi-step forms should not force sideways scrolling, and session timeouts should not erase work without warning.
8. Capture evidence. Record the URL, browser and operating system, zoom level, the component involved, a screenshot and the user impact. Note the likely WCAG 2.2 reference, such as 1.4.10 Reflow, alongside related issues such as focus visibility or content on hover.
9. Triage and retest. Separate template-level problems from content-level ones. A fixed header is a design-system issue; a long unbroken URL in a table may be a content issue. Retest after the fix at the same zoom level and on at least one other browser.

Design decisions that prevent failure

The most effective fixes are rarely dramatic. Use fluid grids and maximum widths rather than fixed widths. Allow flex items to wrap. Avoid hover-only menus and provide a keyboard-operable disclosure pattern that fits inside the viewport. Keep sticky elements small in height, or let them scroll away. Place cookie banners and alerts in the normal document flow where possible. Use relative units for text and spacing. Avoid text embedded in images. For tables, provide a responsive alternative or a clearly signposted scrollable region rather than letting the whole page expand sideways.

Teams should also test during design, not only before release. A component that has been checked at 400% zoom in isolation is less likely to break the homepage later. Content editors need a short checklist for banners, tables and embedded documents, because those are the elements most likely to reintroduce horizontal scrolling after a template fix.

Make reflow part of the routine

A council website is often the primary route to a statutory service. For a resident with low vision, 400% zoom is not an edge case; it is how the page is read. Adding reflow checks to the definition of done, sampling top tasks every month and including the test in procurement questions will do more than a one-off audit. The goal is simple: at high magnification, the page should still read as a page, not as a puzzle with missing pieces.