Accessible web design: a practical starting guide

Design for perception

Use strong contrast, readable type sizes and spacing that allows text to breathe. Never rely on colour alone to communicate status or meaning. Important text should remain legible when zoomed and should not be baked into images.

Provide useful alternative text for meaningful images and leave decorative imagery out of the reading order. Caption video, supply transcripts when audio carries information and avoid motion that cannot be paused.

Make every interaction operable

A visitor should be able to reach and use links, menus, forms and controls with a keyboard. Focus must be visible, logical and never trapped. Tap targets need enough size and separation for people with limited dexterity or a moving screen.

Avoid interactions that depend on hover, drag or precise timing. Give people time to read, warn before a session expires and provide an equivalent way to complete gesture-based tasks.

• Logical keyboard order
• Visible focus indicators
• Comfortable target sizes
• No keyboard traps

Write and structure for understanding

Use one clear page heading followed by meaningful subheadings. Label links by destination or action instead of repeating “click here”. Keep sentences direct and explain unfamiliar terms when they are necessary.

Forms need persistent labels, clear instructions and errors that identify both the problem and its correction. Do not erase a person’s work after an error. Confirmation should be obvious and announced to assistive technology.

Test beyond a checklist

Automated checks catch missing labels, contrast failures and structural mistakes, but they cannot judge whether a journey makes sense. Test keyboard navigation manually, zoom the page, use a screen reader and review content at different widths.

Include people with disabilities in research when the service affects them. Record known issues, assign owners and test again after changes. Accessibility improves through repeated practice, not a one-time badge.