Zoom, Sticky Headers, and a Sprint of CSS

At 400% zoom on a 1280 px viewport the layout has an effective width of 320 CSS px, and content must reflow into that column without two-dimensional scrolling, except for content that genuinely requires it, such as data tables, maps, and some diagrams. Horizontal scrolling here is a layout choice, not an exception.

Likely causes and fixes:

• Fixed-width containers: a wrapper with width: 1200px or a card grid with min-width on the cards prevents shrinking. Replace fixed widths with max-width: 100% and let flex or grid wrap.
• Three-column card grid: use grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)), or a media query that collapses to one column, so cards stack rather than overflow.
• Long unbreakable strings: URLs, reference numbers, and long words can force overflow; add overflow-wrap: anywhere on the relevant text containers.
• Images and embedded media: max-width: 100%; height: auto so they scale.
• Off-canvas menus: ensure a closed panel is not positioned outside the viewport in a way that creates scroll width; use visibility: hidden or display: none rather than a large negative offset alone.

Test at 320 CSS px width directly, and also at 400% zoom in a real browser, since zoom and viewport width are not identical in effect. Also verify text spacing overrides do not clip content.

Focus obscured is governed by Focus Not Obscured (Minimum), 2.4.11 at AA: when a component receives keyboard focus, it must not be entirely hidden by author-created content such as a sticky header. The fix is to reserve space for the header when scrolling: apply scroll-padding-top equal to the header height (plus a small margin) on the scrolling container, or scroll-margin-top on focusable elements. Where the design allows, make the header non-sticky at narrow widths or let it shrink. Then test by tabbing through the whole page at 400% zoom, not by clicking.

The focus indicator itself should also be visible and high contrast; a custom :focus-visible style with a 2 px outline and offset is more reliable than relying on browser defaults that the reset may have removed.

Target size is governed by Target Size (Minimum), 2.5.8 at AA: 24×24 CSS px, unless the target has sufficient spacing (a 24 px diameter circle centered on the target does not intersect another target) or is inline text, among other exceptions. A 20×20 icon with 4 px padding is 28×28 if padding counts toward the clickable area, which is acceptable only if the hit area truly includes it and spacing to neighbors is adequate; if the padding is on a wrapper that does not receive clicks, the target is 20×20 and fails. Make the button at least 24×24, preferably 44×44 for a primary control, and give the panel links more height and spacing.

Sequence by user impact and by whether the fix is a systemic CSS change or a one-off component.

1. Global CSS first: reflow fixes and scroll-padding-top are small, low-risk rules that resolve failures across every page. They also reduce duplicate tickets. Do these in the first days and verify at 320 px and at 400% zoom.
2. Header and menu component: enlarge the menu button, add a visible or programmatically available text label, and fix the panel link spacing. This is one component change with high payoff because the menu appears on every page.
3. Carousel: auto-advancing content that starts automatically, lasts more than five seconds, and runs in parallel with other content needs a pause, stop, or hide mechanism (Pause, Stop, Hide, 2.2.2). The cheapest compliant option may be to remove autoplay entirely, which is often better for reading and for motion sensitivity. That counts as the second component change.
4. Remaining contrast and spacing issues: schedule after the release, with a named owner.

Record what was fixed and what remains, so the procurement review sees an accurate picture rather than an assurance that everything is done.