Skip to main content
← All articles

Accessibility in practice

Plan a small responsive accessibility review

A few carefully chosen viewport widths can reveal reflow, overflow, target-size, and focus problems. Pair automated checks with a short hands-on review.

By A11y Scan team

Published

Updated

Choose widths that answer a question

Start with the desktop layout and a narrow viewport around 320 to 400 CSS pixels. Add a width where the design changes columns or navigation. The goal is to exercise layout transitions and content reflow, not to collect an arbitrary number of screenshots.

Look for more than clipping

At each width, check that content remains available without two-dimensional scrolling except where the content requires it. Inspect text resizing, sticky headers, dialogs, navigation, and long labels. Verify that focus is not hidden behind a fixed toolbar and that controls remain reachable.

Use viewport scans as supporting evidence

Enable the extension’s multi-viewport scan and choose representative widths. Review the per-width results and open affected elements in the corresponding layout. A successful scan cannot judge every visual reflow problem, so inspect the rendered page at the same widths.

Treat mobile emulation as a browser simulation

The extension can ask Chrome’s debugger to emulate viewport dimensions and touch behavior for an opt-in test. That can reveal some responsive and target issues, but it is not testing on a physical device and does not reproduce every mobile browser, operating system, assistive technology, or input method.

Finish with a real interaction pass

At narrow width, navigate using the keyboard and try the main task. If touch behavior matters, test it on an actual device too. Record the viewport, browser, and steps so another person can repeat the check.