Mobile accessibility: small screens, complete journeys

Start with content and zoom

The WCAG Reflow criterion generally requires vertically scrolling content to be presented at a width of 320 CSS pixels without loss of information or functionality and without scrolling in two directions. Exceptions cover content that needs a two-dimensional layout for its use or meaning, such as certain tables or maps. A single exception does not justify horizontal scrolling for all of the body text.

The narrow view also matters for people who zoom a desktop browser a long way. So check both a narrow viewport and browser zoom. Menus, messages and fixed bars must not block the way to the content.

Assess touch targets and spacing together

WCAG 2.2 AA generally specifies at least 24 × 24 CSS pixels for pointer input. The criterion includes exceptions for sufficient spacing, equivalent alternatives and links within body text, among others. It does not mandate 44 × 44 pixels for every element across the board. Larger targets can still make operation easier and often make sense for important actions.

Pay particular attention to closely packed icons, small close buttons and quantity controls in the basket. What matters is the area that actually triggers the action, not just the visible size of the icon. Test with less precise movements too.

Gestures need suitable alternatives

If a function uses a multipoint or path-based gesture, WCAG generally requires a way to operate it with a single pointer without such a gesture, unless the gesture is essential. An image gallery can also offer previous and next buttons. For dragging movements, WCAG 2.2 AA has a criterion of its own: a suitable alternative without dragging must be available unless an exception applies. A visible slider on its own does not yet prove that this alternative exists.

Consider portrait and landscape

Don't restrict content and operation to a single orientation without an essential reason. Some people mount their device in a holder and cannot simply rotate it. Test both orientations and open the on-screen keyboard while doing so. A form that disappears behind a fixed footer in landscape can become unusable despite a good initial view. Also check dialogs with longer texts and error messages.

Test a mobile task from start to finish

1. 1Choose a central task, such as an enquiry or an order, and prepare safe test data.
2. 2Start in the narrow view and check text reflow, navigation and any notices that appear.
3. 3Operate select fields and buttons by touch; try out alternatives to swiping and dragging.
4. 4Change the orientation and open the on-screen keyboard at every input step.
5. 5Repeat the task with the device's screen reader and document missing names, unclear states and blocked actions.

Combine device testing and simulation

The device view in a desktop browser helps you check widths and layout changes reproducibly. However, it does not fully reproduce the real touchscreen, the on-screen keyboard or mobile assistive technology. Note the device, browser, orientation and test steps. Fix recurring problems in the shared component and, after the change, repeat the same process on the device you used.