Website accessibility basics: ten fixes that help everyone

Web accessibility means building sites that people can use whatever their abilities, device or situation. That includes people who use screen readers or keyboards, people with low vision or colour blindness, and anyone squinting at a phone in bright sunlight. Accessible design is good design, and most of it also helps search engines understand your pages.

The standard to aim for

The widely used reference is the Web Content Accessibility Guidelines (WCAG), and most organisations aim for level AA. Accessibility laws and expectations differ by country, so check what applies to your business, but the practical fixes below are a strong foundation anywhere.

Ten fixes with the biggest impact

1. 1Enough colour contrast. Normal text needs a contrast ratio of at least 4.5 to 1 against its background, and large text and interface parts at least 3 to 1.
2. 2Full keyboard access. Everything you can click must work with Tab, Enter and Escape, and the focus indicator must always be visible.
3. 3Meaningful alt text. Describe images that carry information, and leave the alt empty for purely decorative ones.
4. 4Labelled form fields. Every input needs a visible label, and error messages should say what went wrong and how to fix it.
5. 5A logical heading order. One h1, then h2 and h3 in a sensible hierarchy, so people can navigate by headings.
6. 6Descriptive link text. “Read our pricing guide” works for everyone. “Click here” does not.
7. 7Never rely on colour alone. Add an icon or text so that errors and states are clear to colour-blind users.
8. 8Captions and transcripts for video and audio.
9. 9Respect reduced motion. Offer a calmer experience to people who turn animation off in their system settings.
10. 10Comfortable touch targets. Make buttons and links large enough to tap, at least 24 by 24 pixels under WCAG 2.2, and larger is better.

:focus-visible {
  outline: 2px solid #0A5CFF;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

How to test

• Put your mouse aside and use the whole site with only the keyboard.
• Zoom the page to 200 percent and check that nothing breaks.
• Try a screen reader on your key pages, such as VoiceOver on Apple devices or NVDA on Windows.
• Run automated tools like Lighthouse or axe, which catch many issues but not all of them.