Accessibility Basics That Take an Afternoon and Matter for Years

Accessibility gets treated as a specialist audit at the end of a project. Most of the actual benefit comes from a handful of things you can do while building, at close to zero cost.

1. Use the Right Element

A <div onclick> is not a button. It cannot be focused, cannot be triggered with Enter or Space, and is announced as nothing at all by a screen reader. A real <button> gets all of that for free.

Same for <a>, <nav>, <main>, <label>. Native elements come with behaviour you would otherwise have to rebuild — badly.

2. Navigate Your Own Site With the Keyboard

Put the mouse down and press Tab through a page. Can you reach every control? Open and close the mobile menu? Escape a modal? This five-minute test finds more problems than any automated scanner.

3. Never Remove the Focus Ring Without Replacing It

/* Do not do this */
*:focus { outline: none; }

/* Do this */
:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

:focus-visible shows the ring for keyboard users and hides it for mouse clicks — which is what people actually wanted when they removed it.

4. Check Colour Contrast

4.5:1 for body text, 3:1 for large text. Light grey on white fails, and it fails hardest on a phone in daylight — which is a large share of your traffic, not an edge case.

5. Write Alt Text That Describes Purpose

alt="chart" is useless. alt="Revenue growth from 2024 to 2026" is useful — to screen readers and to Google Images. Decorative images get alt="" so they are skipped entirely.

6. Label Every Input

<label for="email">Email address</label>
<input id="email" type="email" name="email">

A placeholder is not a label. It disappears on focus and is announced inconsistently.

Then Run an Automated Check

Lighthouse and axe DevTools catch contrast issues, missing labels and bad heading order in seconds. They will not catch everything — but combined with the keyboard test above, you will be ahead of most sites on the web.