phone readability
Easy to read and use on a phone.
A free guide to readable type, tap targets, contrast and layout, from the design rules behind the Website Audit Report.
- WCAG Every page has a responsive viewportchecked
- WCAG 1.4.4Body text is 16 px or largerchecked
- WCAG 1.4.3Text contrast is at least 4.5 to 1checked
- WCAG 1.4.4Pinch zoom workschecked
- WCAG 1.4.10Pages fit a 360 px screenchecked
Phone and Accessibility checks on every Website Audit Report
Is your website easy to read on a phone?Enter
- 47guidelinesOn reading and using a website on a phone
- 4topicsTouch, type, contrast and layout
- 27cite WCAGGuidelines tied to a WCAG 2.2 success criterion
guidelines
Four topics, one small screen.
47 guidelines on what makes a page easy to read and use on a phone, each with what to do and what to avoid.
Tap targets and touch
Thumbs are not mouse pointers. Tap targets, zoom, gestures and the edges of a phone screen.
Read the 12 guidelinesReadable type and words
Text people can read on a small screen: line length, text size, plain words and headings that say something.
Read the 11 guidelinesContrast and accessibility
Contrast, focus, alt text and reflow, so everyone can read and use the page, in sunlight or with a screen reader.
Read the 12 guidelinesLayout and navigation
A layout that stays the same from page to page: the same menu in the same order, a skip link and a clear mark on the current page.
Read the 12 guidelines
on the report
The checks in Phone and Accessibility.
The Website Audit Report runs these on every page it reads. Most of them have a guideline here that explains why.
Every page has a responsive viewport
Without a viewport tag phone visitors see a zoomed-out desktop layout and leave.
- Fix: Add <meta name="viewport" content="width=device-width, initial-scale=1"> to every page.
- Good practice, no WCAG criterion
Body text is 16 px or larger
Small body text is hard to read on a phone.
- Fix: Set body copy, links and form text to 16 px or larger.
- WCAG 2.2 success criterion 1.4.4
Text contrast is at least 4.5 to 1
Low contrast text is unreadable in sunlight and for many readers. Measured on solid backgrounds only.
- Fix: Darken the text or lighten the background until the ratio is at least 4.5 to 1.
- WCAG 2.2 success criterion 1.4.3
Pinch zoom works
A viewport that forbids zoom stops readers enlarging text on a phone.
- Fix: Remove user-scalable=no and maximum-scale=1 from the viewport tag.
- WCAG 2.2 success criterion 1.4.4
Pages fit a 360 px screen
Content wider than a phone screen forces sideways scrolling and hides buttons. The report loads each page at 360 px, a common phone width. The guideline asks for a layout that still works at 320 px.
- Fix: Constrain wide elements with max-width 100 percent and let tables scroll inside their own box.
- WCAG 2.2 success criterion 1.4.10
Every image has alt text
Screen readers and search engines cannot tell what the image shows.
- Fix: Give every meaningful image an alt attribute and an empty alt to decorative ones.
- WCAG 2.2 success criterion 1.1.1
Every button and link has a name
A control with no text or label cannot be read out or understood by assistive tools.
- Fix: Give every button and link visible text or an aria-label.
- WCAG 2.2 success criterion 4.1.2
Tap targets are at least 24 px
Small links and buttons are missed on a phone, so visitors tap the wrong thing or give up. The report flags anything under 24 px, the WCAG 2.2 minimum. The guideline's 44 px is the comfortable size to aim for.
- Fix: Make every link, button and form control at least 24 px on each side with space between them.
- WCAG 2.2 success criterion 2.5.8
Heading levels run in order
Jumping from H1 to H3 breaks the outline that readers and assistive tools navigate by.
- Fix: Nest headings in order with no level skipped.
- WCAG 2.2 success criterion 1.3.1
Every page declares its language
Screen readers and translation tools read the lang attribute to pronounce and translate the page correctly.
- Fix: Add lang="en" (or the page's language) to the <html> tag.
- WCAG 2.2 success criterion 3.1.1
No element forces the tab order
A tabindex above 0 pulls keyboard focus out of the page's reading order and confuses keyboard users.
- Fix: Remove positive tabindex values and let the page order carry focus.
- WCAG 2.2 success criterion 2.4.3
Every page has a main landmark
Screen reader users jump to the main landmark to skip the header; without one they read the whole page.
- Fix: Wrap the page's main content in a <main> element.
- WCAG 2.2 success criterion 1.3.1
Every page has a skip link or a main landmark
Keyboard and screen reader users have nothing to jump to past the header: the page has neither a skip link nor a main landmark.
- Fix: Wrap the page's content in a main element and add a 'Skip to content' link as the first focusable element, pointing at it.
- WCAG 2.2 success criterion 2.4.1
Every link says where it goes
A link that does not say where it goes is skipped by scanners, read aloud without context to screen reader users and tells search engines nothing about the page it points to.
- Fix: Make each link's words describe its destination ("See our pricing", "Read the case study") and drop the "click here" wrapper.
- WCAG 2.2 success criterion 2.4.4
No heading is empty
An empty heading adds a blank entry to the outline that search engines and screen readers read. It is usually a template leftover.
- Fix: Put real text in each empty heading or remove the tag.
- Good practice, no WCAG criterion
how it works
Read it, check it, keep it right.
Read the guidelines
What makes a page easy to read and use on a phone, topic by topic.
Run the free check
The free website audit on uplinkd.com runs the report's phone checks on any site.
Keep it right
The Website Audit Report runs them again each month and lists what to fix, most important first.
questions
Questions, answered.
What is UXPlate?
A free guide to what makes a website easy to read and use on a phone, from Uplinkd Group. It is the design and phone-readability side of the Website Audit Report: the guidelines here explain the checks the report runs.
What does it cost?
Nothing. Read every guideline here. There is no sign-up and nothing to buy on this site.
Where do the guidelines come from?
From the design rules Uplinkd Group keeps for its own work, the same rules behind the report's phone checks. 27 of the 47 guidelines cite the WCAG 2.2 success criterion they meet.
What does the Audit Report check on a phone?
Its Phone and Accessibility sections run checks on every page, such as every page has a responsive viewport, body text is 16 px or larger and text contrast is at least 4.5 to 1. The free website audit on uplinkd.com runs them on any site.
Why do the report and a guideline give different sizes?
The report flags anything under 24 px, the WCAG 2.2 minimum. The guideline's 44 px is the comfortable size to aim for. The report loads each page at 360 px, a common phone width. The guideline asks for a layout that still works at 320 px.
What does this site measure?
We measure visits to this site with analytics. We never track your clients or their sites through the report. The privacy and cookie policies have the detail.
See how your website reads on a phone.
Run the free website audit on any site, then keep it easy to read with the Website Audit Report each month.