Accessibility basics every business website should get right
Accessible websites work better for everyone. These are the WCAG 2.2 fundamentals that make the biggest difference, and how to check them.
Accessibility means people can use your website whatever their abilities or circumstances: with a screen reader, with a keyboard instead of a mouse, with low vision, or with a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) 2.2 set out how, and level AA is the standard most organisations aim for.
You don’t need to memorise the guidelines to get the basics right. These cover most of what we see go wrong.
Contrast you can read
Body text needs a contrast ratio of at least 4.5:1 against its background. Large text and interface elements such as input borders need at least 3:1. Pale grey text on white is the most common failure.
Everything works with a keyboard
Press Tab through your site. You should reach every link, button and form field in a sensible order, and always see where you are. If the focus outline has been removed for style, put it back.
Images that are described
Images that carry information need alternative text that says what matters about them. Decorative images should have empty alternative text, so screen readers skip them.
Forms that explain themselves
Every field needs a visible label, not just placeholder text that disappears as you type. Error messages should say what went wrong and how to fix it, next to the field concerned.
Headings that outline the page
Screen-reader users often jump between headings to understand a page. Use one main heading and nest the rest in order, rather than choosing heading levels for their size.
Targets big enough to tap
WCAG 2.2 added a minimum target size: buttons and links should be at least 24 by 24 CSS pixels, or have enough space around them. Tiny icons and crowded links are hard for everyone on a phone.
Motion that can be switched off
Animation can cause discomfort or distraction for some people. Respect the reduced-motion setting on their device, and never make content depend on an animation to appear.
How to start
- Run an automated checker such as WAVE or axe on your key pages. It catches common problems quickly, but not everything.
- Use the same pages with a keyboard only.
- Zoom the browser to 200% and check that nothing breaks or overlaps.
- Fix issues in templates rather than page by page, so every page benefits.
Accessibility work often improves search visibility and conversion too, because clear structure and readable content help every visitor.
