Accessibility is not optional

Accessibility is one of those things that gets treated as a stretch goal, something to add at the end if there's time. There's rarely time. And the people who need it most are the ones who can't work around the gaps.

Here's the baseline I build into every project from the start.

Semantic HTML is 70% of the work

Most accessibility issues come from using the wrong element. A <div> with a click handler instead of a <button>. An image with no alt. A heading hierarchy that skips from <h1> to <h4>.

Semantic HTML gives browsers, screen readers, and search engines the right information for free. You don't need ARIA if the element already communicates what it is:

<!-- Wrong: requires ARIA to be accessible -->
<div role="button" tabindex="0" onClick={handleClick}>Submit</div>
 
<!-- Right: keyboard accessible, announces as a button, submits forms -->
<button type="submit">Submit</button>

Start with the right element. Add ARIA only when native HTML can't express what you need.

Keyboard navigation should work without a mouse

Tab through the page. Can you reach every interactive element? Does it have a visible focus indicator? Can you activate it with Enter or Space?

The default browser focus outline is fine. Don't remove it without replacing it:

/* Don't do this */
:focus { outline: none; }
 
/* Do this instead */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:focus-visible only shows the outline for keyboard users, not mouse clicks. Best of both worlds.

Colour contrast: the quick check

Text needs a contrast ratio of 4.5:1 against its background (3:1 for large text). This isn't a design constraint. It's the difference between readable and invisible for people with low vision. The Chrome DevTools accessibility panel checks this automatically. Run it.

Images need useful alt text

Not alt="image". Not alt="photo of product". Alt text describes what the image communicates:

<!-- Decorative image: empty alt, not missing -->
<img src="/divider.svg" alt="" />
 
<!-- Informative image -->
<img src="/team-photo.jpg" alt="The CreaTech team at a client workshop in London" />

An empty alt="" tells screen readers to skip the image. A missing alt attribute causes screen readers to announce the filename instead. Small distinction, big difference.

The WCAG audit that takes five minutes

Before shipping, I run four checks:

1. Tab through every page with a keyboard only
2. Run Lighthouse accessibility audit (score above 90 is a good signal, not a guarantee)
3. Check colour contrast with the Chrome DevTools tool
4. Test with macOS VoiceOver on at least the main user journey

This doesn't catch everything. But it catches the most common failures, and it costs less than an hour.

Accessibility isn't a feature you add later. It's the quality of the thing you built. If that matters to you, it matters to me too.