← Go Back

Accessibility

What is accessibility?

Accessibility (often shortened to a11y) means designing digital products so that people with disabilities can use them effectively. It’s about removing barriers so that everyone can perceive, operate, and understand your interface.

Use it when: you’re designing or building any user-facing digital product. It’s not optional for public-facing work.

Copy/paste checklist (above the fold)

  • [ ] All images have meaningful alt text (or are marked decorative).
  • [ ] Colour isn’t the only way to convey information.
  • [ ] Interactive elements are keyboard focusable and have visible focus.
  • [ ] Text has sufficient contrast against the background (WCAG AA as a minimum).
  • [ ] Forms have visible labels and clear error messages.

Why accessibility matters

  • Expands your audience: a large number of people have permanent or temporary access needs.
  • Improves usability for everyone (clear structure, captions, and contrast help all users).
  • Reduces legal and reputational risk in many jurisdictions.
  • Aligns with inclusive design and ethical product practice.

What good accessibility includes

Checklist

  • [ ] Perceivable: text alternatives for images, captions for video, sufficient contrast.
  • [ ] Operable: keyboard navigation, no time-only traps, no seizure-inducing content.
  • [ ] Understandable: readable language, predictable behaviour, helpful errors.
  • [ ] Robust: semantic HTML and compatibility with assistive technologies.

Common formats

  • WCAG 2.x levels: Level A (minimum), AA (common target), AAA (stretch). Aim for AA unless you have a justified exception.
  • Testing mix: automated checks (e.g. axe) plus keyboard and screen reader testing. Automated alone is not enough.

Examples

Example (the realistic one)

A sign-up form: every field has a visible label and is reachable and operable by keyboard; errors are announced and shown in text, not only in colour; the submit button has a clear name for screen readers. You’ve tested with keyboard only and with one screen reader (e.g. NVDA or VoiceOver).

Common pitfalls

  • Images without alt text: screen reader users get nothing or a filename. → Do this instead: write a short, accurate description or mark decorative images so they’re skipped.
  • Colour as the only differentiator: colour-blind users miss the distinction. → Do this instead: use colour plus text, icon, or pattern.
  • Keyboard traps or missing focus: keyboard users can’t reach or leave a component. → Do this instead: ensure tab order and focus management; never remove focus visibility.
  • Low contrast: text is hard to read for many users. → Do this instead: meet WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large).
  • Accessibility vs inclusive design: accessibility focuses on people with disabilities; inclusive design considers the full range of human diversity. They overlap; do both.
  • Accessibility vs UX: good UX includes usable, findable, and understandable content; accessibility ensures that applies to people with access needs too.

Next step

Run an automated audit (e.g. axe DevTools) on one key flow, then fix the issues. For the same flow, read Keyboard navigation and test with keyboard only.

Related Terms