Mobile accessibility: the WCAG checks for small screens

Key takeaways

Mobile accessibility means a website can be used on a phone by people with visual, motor, hearing or cognitive impairments. The same Web Content Accessibility Guidelines (WCAG) apply as on desktop, but six of the checks bite hardest on small touch screens. Meeting them makes the site easier for every visitor with a thumb and a glare-lit screen.

• Reflow: content works at 320 CSS pixels wide without sideways scrolling.
• Target size: controls are at least 24 by 24 CSS pixels, ideally 48.
• Zoom and orientation: pinch zoom is not disabled and the page is not locked to portrait.
• The Equality Act 2010 expects service providers to make reasonable adjustments.

What is mobile accessibility?

Mobile accessibility is the practice of making websites and apps usable on phones and tablets by people with disabilities, including those who use screen readers, magnification, voice control or switch devices. There is no separate mobile standard. WCAG 2.2 covers all screen sizes, and several of its criteria were written with touch screens in mind.

It is also good design for everyone. Text that can be enlarged, buttons that can be hit with an unsteady thumb and contrast that survives sunlight help a visitor on a bus as much as a visitor with a visual impairment.

• Why mobile-friendly web design is essential for UK businesses
• Website accessibility for UK businesses

Which WCAG checks matter most on a phone?

Six WCAG 2.2 level AA criteria account for most mobile accessibility failures on business websites. Each can be checked on a real phone in a few minutes.

• 1.4.10 Reflow: no two-dimensional scrolling at a width of 320 CSS pixels.
• 2.5.8 Target Size (Minimum): targets at least 24 by 24 CSS pixels, with listed exceptions.
• 1.4.4 Resize Text: text can be enlarged to 200% without losing content or function.
• 1.3.4 Orientation: content is not locked to portrait or landscape unless essential.
• 1.4.3 Contrast (Minimum): body text contrast of at least 4.5 to 1.
• 2.5.1 Pointer Gestures: anything done by swiping or pinching can also be done with a single tap.

• Tap target size: how big should buttons be on mobile?
• Font size for mobile websites: what is readable?
• Website scrolls sideways on mobile? Causes and fixes

What does UK law expect?

The Equality Act 2010 requires businesses that provide services to the public to make reasonable adjustments so that disabled people are not placed at a substantial disadvantage. A website is part of how a service is provided. The Act does not name a technical standard, but WCAG 2.2 level AA is the recognised benchmark for showing you have taken reasonable steps.

Public sector bodies face a specific duty. The accessibility regulations for public sector websites and mobile applications require them to meet WCAG 2.2 AA and publish an accessibility statement. Private businesses selling to the public sector are often asked to meet the same standard in tenders.

How do you test with a screen reader?

Every modern phone has a screen reader built in: VoiceOver on iPhone and TalkBack on Android. Switch it on in the accessibility settings and try to reach your contact details and submit your enquiry form without looking at the screen. Ten minutes will show you more than any automated report.

• Do buttons and icons announce what they do, or just 'button'?
• Do images have meaningful descriptions, or file names?
• Are headings announced in a logical order?
• Do form fields announce their labels and any errors?
• Can you open and close the menu and any pop-up?
• Does the reading order match the visual order?

• Mobile form design: forms people finish on a phone

What are the most common mobile failures?

The same handful appear on most small business sites. Zoom disabled in the viewport tag. Icon buttons with no accessible name, so a screen reader says 'button' and nothing else. Pale grey text. Pop-ups that trap focus or cannot be closed. Carousels that move with no pause control. Forms whose error messages are shown only in colour.

Most are quick to fix once found. They persist because nobody on the team uses the site the way an affected visitor does, and because automated tools catch only a portion of accessibility issues.

• The viewport meta tag: one line that makes mobile work
• Carousels on mobile websites: keep, fix or remove?

What does it cost, and where are the limits?

Fixing the common failures on an existing site usually sits within an indicative £500 to £3,000, since most are template and stylesheet changes. A full audit against all WCAG 2.2 AA criteria with manual testing is a larger piece of work and is worth commissioning for regulated sectors, public sector suppliers and larger sites.

Be realistic about scope. No site is perfectly accessible, and third-party widgets such as booking tools, maps and chat are often outside your control. Fix what you own, choose suppliers that publish accessibility information, and provide an alternative route, such as a phone number, for anything that cannot be made accessible.

• What it costs to make a website mobile-friendly in the UK

What does this look like in practice?

A pattern we see on clinic and care provider sites: the people most likely to need the service are the people the mobile site serves worst. Text is fixed at a small size, zoom is disabled, the booking button is a pale icon with no label, and the phone number is an image.

Enabling zoom, labelling the controls, raising contrast and making the number a real link are a day's work, and they open the site to visitors who were previously shut out. Global Bridge Labs (GBL) includes a screen reader pass on a real phone in every pre-launch check.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Mobile accessibility checklist

• Check the page at 320px wide for sideways scrolling.
• Confirm pinch zoom works and text enlarges to 200%.
• Rotate the phone and confirm the layout adapts.
• Measure tap targets and contrast on key templates.
• Give every icon button an accessible name.
• Test the main journey with VoiceOver or TalkBack.
• Offer a phone number as an alternative to any inaccessible widget.

Next step

Turn on your phone's screen reader and try to book or enquire through your own site. Whatever stops you is stopping customers, and probably more of them than you think.