Web Accessibility Basics Every Frontend Developer Should Already Know

Accessibility has a reputation as a specialist topic — something you hire an auditor for at the end. Working on healthcare products cured me of that idea: when your users include elderly patients, screen-reader users, and people with tremors, accessibility is just correctness. And the truth is that four basics, applied consistently, prevent the large majority of failures I see in audits. None of them requires expertise. All of them require habit.

Why this isn't optional

Beyond the obvious (roughly one in six people has a disability; legal exposure via ADA and the European Accessibility Act is real and growing), there's the selfish case: accessible HTML is more robust HTML. Semantic structure improves SEO, keyboard support makes power users faster, and every fix below makes your UI better for everyone on a bad day — bright sunlight, a broken trackpad, a sprained wrist.

1. Semantic HTML over div-soup

Screen readers navigate by structure — landmarks, headings, lists. A page built from styled <div>s has no structure to navigate.

<!-- ❌ Announces nothing, keyboard-invisible, needs JS to half-work -->
<div class="btn" onclick="save()">Save</div>
 
<!-- ✅ Focusable, announced as a button, works with Enter/Space for free -->
<button type="button" onclick="save()">Save</button>

The same applies at page level: <nav>, <main>, <header>, one <h1> with headings that nest in order, <ul> for lists, <label> for every form field. Rule of habit: reach for a <div> only after asking which element you're avoiding. The element carries behavior (focus, keyboard handling, announcements) that you otherwise must rebuild in JavaScript — usually incompletely.

2. Color contrast (and how to actually check it)

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The classic failure is gray-on-white that looked refined in the design tool:

/* ❌ #999 on white = 2.85:1 — fails AA */
.caption { color: #999; }
 
/* ✅ #5B6068 on #F6F5F0 = ~5.6:1 — passes */
.caption { color: #5b6068; }

Don't eyeball it — check it: browser DevTools shows the ratio in the color picker, and WebAIM's contrast checker takes ten seconds. Two habits close most gaps: define your palette's text colors with contrast pre-verified (so product screens can't fail), and re-check in dark mode, where ratios that passed on white silently fail on dark backgrounds.

3. Keyboard navigability

A meaningful slice of users never touches a mouse — screen-reader users, people with motor impairments, and every developer who's tried to fill a form with a broken trackpad. The test costs sixty seconds: put the mouse down and Tab through your page.

• Can you reach every interactive element? (If not: something's a div that should be a button, or tabindex="-1" snuck in.)
• Can you see where you are? Focus must be visible — if your CSS reset includes outline: none, you've blinded keyboard users unless you replaced it:

/* ✅ Visible focus without affecting mouse users */
:focus-visible {
  outline: 2px solid #4a47e0;
  outline-offset: 2px;
}

• Can you operate everything — menus with Enter/Escape, no keyboard traps in modals?

Custom dropdowns and dialogs are where this dies. Before building one, check whether a native element (<select>, <dialog>, <details>) gets you there — it's accessible out of the box.

4. Meaningful alt text

Every <img> needs an alt attribute; the skill is in what it says:

<!-- ❌ Redundant noise -->
<img src="chart.png" alt="image of a chart" />
 
<!-- ✅ Conveys what the image communicates -->
<img src="chart.png" alt="Line chart: patient signups doubled between January and June" />
 
<!-- ✅ Decorative image, deliberately silent -->
<img src="divider.svg" alt="" />

The question to ask: if the image vanished, what words would preserve its meaning? Informative images get that sentence; decorative ones get alt="" (empty, present — a missing attribute makes screen readers read the filename aloud). Images inside links describe the destination: alt="View the pricing page", not alt="arrow icon".

The self-audit checklist

Run this against your current project this week — it takes fifteen minutes:

• Headings form a logical outline (one h1, no skipped levels)
• Landmarks exist: <nav>, <main>, <footer>
• Every form field has an associated <label>
• Text contrast ≥ 4.5:1 — spot-check your grays in DevTools
• Tab through every page: everything reachable, focus always visible
• Every image has appropriate alt (meaningful or deliberately empty)
• Run Lighthouse's accessibility audit and fix what it flags

These four habits won't make you an accessibility expert. They'll do something more useful: make the expert's audit boring.