Make your website work on phones and keyboards

A practical usability checklist for small screens, readable content and accessible controls.

Test how people actually use the site

Do not review a website only on the laptop where you built it. Use a narrow phone viewport, a wider screen and the keyboard. Check both a successful task and a failure, such as an invalid form submission or a lost connection.

Start with readable content

Use a clear heading structure and meaningful link labels. Avoid tiny text and paragraphs stretched across the whole screen. Text needs enough contrast against its background, including when a control is disabled, focused or showing an error.

Make controls understandable

Every input needs a visible label. An icon-only button needs an accessible name. Errors should explain how to correct the problem and remain visible long enough to act on them. Do not rely only on colour to indicate success, selection or failure.

Use the keyboard

Move through the page with Tab and Shift+Tab.
Check that the focused element is clearly visible.
Open and close menus and dialogs without a mouse.
Confirm focus returns somewhere sensible after closing a dialog.
Make sure a popup does not hide the control you need next.

Review the phone layout

A page should not require horizontal scrolling to read ordinary content. Allow headings and email addresses to wrap. Keep controls comfortably separated. Check menus, sticky banners, forms and the on-screen keyboard; these often reveal issues that a desktop screenshot misses.

Be considerate with motion and media

Respect reduced-motion preferences. Avoid automatic audio and rapidly changing elements. Give useful images descriptive alternative text and leave decorative images out of the reading order. Add captions or transcripts when you publish instructional video.

Test with another person

Ask someone to complete one task without coaching. Note the points where they stop or click the wrong thing. Fix those issues before adding more animation or decorative features. Automated checks help, but they do not replace watching a person use your site.