phone checks
What the Health Report checks on a phone.
Every Website Health Report has a section called Easy to read on a phone. It runs 12 checks on every page it reads, 12 of them tied to a WCAG 2.2 success criterion.
12 checks, one by one.
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
Keyboard users tab through the whole header on every page unless a skip link jumps them to the content.
- Fix: Add a 'Skip to content' link as the first focusable element, pointing at the main landmark.
- WCAG 2.2 success criterion 2.4.1
The rest of the report
The Website Health Report also covers SEO, conversion, trust and security. The free website health check on uplinkd.com shows every section for any site.
See how your website reads on a phone.
Run the free website health check on any site, then keep it easy to read with the Website Health Report each month.