guidelines
Phone readability guidelines.
46 guidelines in 4 topics, each with what to do, what to avoid and the WCAG 2.2 success criterion it meets.
Four topics.
Tap targets and touch
Thumbs are not mouse pointers. Tap targets, zoom, gestures and the edges of a phone screen.
Read the 11 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
| Guideline | Topic | Priority | WCAG 2.2 |
|---|---|---|---|
| Touch targets are at least 44x44 CSS px | Tap targets and touch | Critical | 2.5.8 |
| Keep at least 8px between adjacent touch targets | Tap targets and touch | High | 2.5.8 |
| Put primary mobile actions in the thumb zone | Tap targets and touch | Medium | - |
| Never disable pinch zoom | Tap targets and touch | Critical | 1.4.4 |
| Use dvh, not vh, for full-height mobile layouts | Tap targets and touch | High | - |
| Nothing may be reachable only by hover | Tap targets and touch | High | - |
| Set touch-action: manipulation on tappable controls | Tap targets and touch | Low | - |
| Pad fixed edges with safe-area insets | Tap targets and touch | Medium | - |
| Every gesture has a single-tap alternative | Tap targets and touch | High | 2.5.1 |
| Drag-and-drop always ships with a non-drag fallback | Tap targets and touch | High | 2.5.7 |
| Contain scrolling inside drawers, sheets and modals | Tap targets and touch | Low | - |
| Front-load the point: conclusion first, details after | Readable type and words | Medium | - |
| Keep body text 45-75 characters per line | Readable type and words | Medium | - |
| Write interface copy at a lower-secondary reading level | Readable type and words | Medium | 3.1.5 |
| Action labels are verb plus object, never 'OK' or 'Submit' | Readable type and words | Medium | - |
| Error copy is human: no raw codes, no blame | Readable type and words | Medium | - |
| Headings describe their section's content, not the mood | Readable type and words | Medium | 2.4.6 |
| Use tabular numerals for any column or ticking number | Readable type and words | Low | - |
| Write dates and times unambiguously, with timezone for events | Readable type and words | Low | - |
| Never truncate values users must act on | Readable type and words | Medium | - |
| Reserve all-caps for short labels, and letter-space it | Readable type and words | Low | - |
| Size text in rem so user font-size settings are respected | Readable type and words | High | 1.4.4 |
| Body text contrast is at least 4.5:1 against its background | Contrast and accessibility | Critical | 1.4.3 |
| UI component boundaries and meaningful icons hit 3:1 contrast | Contrast and accessibility | High | 1.4.11 |
| Every interactive element shows a visible focus indicator | Contrast and accessibility | Critical | 2.4.7 |
| Dialogs trap focus while open, release it on close and close on Escape | Contrast and accessibility | Critical | 2.1.2 |
| Anything clickable is a <button> or <a>, operable by keyboard | Contrast and accessibility | Critical | 2.1.1 |
| Every image gets alt text for its function, or empty alt if decorative | Contrast and accessibility | High | 1.1.1 |
| Headings form a logical outline: one h1, no skipped levels | Contrast and accessibility | Medium | 1.3.1 |
| Honor prefers-reduced-motion for every animation | Contrast and accessibility | High | 2.3.3 |
| Icon-only buttons carry an accessible name | Contrast and accessibility | High | 4.1.2 |
| Declare the page language and give every page a unique title | Contrast and accessibility | Medium | 3.1.1 |
| In body text, links are distinguishable without color | Contrast and accessibility | Medium | 1.4.1 |
| Content reflows to a 320px viewport with no horizontal scrolling | Contrast and accessibility | High | 1.4.10 |
| Provide a skip link as the first focusable element | Layout and navigation | High | 2.4.1 |
| Mark the current page in the nav both visually and programmatically | Layout and navigation | Medium | 2.4.8 |
| Keep navigation identical in content and order on every page | Layout and navigation | Medium | 3.2.3 |
| Show breadcrumbs on any hierarchy deeper than two levels | Layout and navigation | Medium | - |
| Label each nav landmark when a page has more than one | Layout and navigation | Medium | 1.3.1 |
| Link text must describe the destination on its own | Layout and navigation | High | 2.4.4 |
| Never override native scrolling behavior | Layout and navigation | Medium | - |
| The mobile menu toggle is a real button with expanded state | Layout and navigation | Critical | 2.1.1 |
| Cap top-level navigation at 5-7 items | Layout and navigation | Low | - |
| Every distinct view gets a URL and a working Back button | Layout and navigation | High | - |
| Dropdown menus open on click and forgive imprecise pointers | Layout and navigation | High | 1.4.13 |
| Offer site search once content outgrows the nav (roughly 50+ pages) | Layout and navigation | Medium | - |
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.