Reflow and Zoom Accessibility Tickets
Reflow findings are easy to underwrite as "layout breaks at zoom." A useful ticket names the exact viewport, zoom level, user task, content that becomes hidden or two-dimensional, and what must still work after the fix.
Use this guide for WCAG 1.4.4 Resize Text and 1.4.10 Reflow issues from manual testing, browser zoom checks, mobile viewport reviews, and screen magnifier workflows.
Draft the zoom finding as a ticket first
Open a checkout reflow example with viewport, zoom, affected content, task impact, and retest criteria already filled in. Replace the sample values with your tested breakpoint and affected component before copying.
What to record before writing the ticket
- Viewport and zoom: for example 320 CSS pixels, 200% browser zoom, 400% browser zoom, text-only zoom, mobile portrait, or landscape.
- Affected task: checkout, account recovery, form submission, table review, search filtering, or another real flow.
- What fails: clipped text, horizontal scrolling, hidden controls, overlapping sticky UI, lost focus indicator, unreadable line length, or content order changes.
- Input path: mouse, touch, keyboard, screen magnifier, screen reader, switch access, or browser zoom only.
- Retest baseline: the same route, state, viewport, zoom level, and input method that exposed the issue.
Ticket framing patterns
- Fixed-width layout: name the container and the task blocked by horizontal scrolling.
- Sticky header or chat widget: explain whether it covers focused controls, error text, or primary actions at zoom.
- Data table: distinguish acceptable table scrolling from a page layout that forces two-dimensional scrolling for the whole task.
- Form fields: preserve label, error, instruction, and autocomplete visibility when text is enlarged.
- Modal or drawer: check whether close buttons, headings, and submit controls remain reachable without trapping or losing focus.
Example ticket
[High] Checkout: order summary requires horizontal scrolling at 400% zoom User impact: Low-vision users who zoom the page may not be able to review totals and apply a coupon before payment without moving sideways and losing context. Evidence: - Flow: checkout order summary - Test condition: desktop browser at 400% zoom / 320 CSS px viewport - Observed: prices extend outside the visible area, the coupon button is clipped, and keyboard focus moves to controls that are partly off-screen - Likely cause: fixed-width summary grid and non-wrapping action row Likely WCAG references to verify: - 1.4.10 Reflow - 1.4.4 Resize Text - 2.4.7 Focus Visible Acceptance criteria: - The main checkout task does not require two-dimensional scrolling at the tested zoom level. - Prices, coupon controls, validation errors, and primary actions remain readable and operable. - Keyboard focus and focus indicators remain visible throughout the order summary.
Useful acceptance criteria
- The affected flow reflows at the tested viewport or zoom level without clipping meaningful content.
- Users can complete the task without horizontal scrolling unless the content type genuinely requires it, such as a wide data table.
- Sticky headers, cookie banners, chat widgets, and bottom bars do not cover focused controls or important messages.
- Labels, instructions, errors, prices, and button text remain visible when text is resized.
- Focus order still follows the visual and reading order after the responsive layout changes.