Accessibility (a11y) Deep Dive

What you'll learn

Accessibility (often shortened to a11y) means building sites that everyone can use, including people with visual, motor, hearing, or cognitive disabilities. It's the mark of a true professional — and much of it you've already been learning throughout this course.

By the end you'll be able to:

• Explain why accessibility matters
• Use semantic HTML as your accessibility foundation
• Ensure sufficient colour contrast and visible focus
• Test your pages for accessibility

Why it matters

Around one in six people lives with some form of disability. Accessible sites reach more users, are often legally required, and — happily — the same practices improve SEO and usability for everyone. Captions help in noisy rooms; good contrast helps in sunlight; keyboard support helps power users. Accessibility isn't a niche add-on — it's simply better web development.

Semantic HTML is the foundation

The single biggest thing you can do for accessibility costs nothing extra: use semantic HTML. A real <button>, proper headings, labelled form fields, landmark regions, and meaningful alt text give assistive technology everything it needs. Most accessibility problems come from not using the elements that already exist — reaching for a <div> with click handlers instead of a <button>.

Contrast & colour

Text must have enough contrast against its background to be readable. The WCAG standard asks for a ratio of at least 4.5:1 for normal text (3:1 for large text). And never rely on colour alone to convey meaning — a red border with no message is invisible to colour-blind users, so pair colour with text or an icon.

Keyboard & focus

Many people navigate with a keyboard only, tabbing through links, buttons, and fields. Two rules matter most: everything interactive must be reachable and operable by keyboard, and the currently focused element must be clearly visible. Never remove focus outlines without providing a better one:

/* Give keyboard users a clear, visible focus ring.
   :focus-visible shows it for keyboard, not mouse clicks. */
button:focus-visible,
a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

For content that should be announced but not shown — like a label that's obvious visually — use a "visually hidden" utility rather than display: none (which hides it from screen readers too):

/* Visible to screen readers, hidden from sight —
   for labels that would be redundant on screen. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Testing

A quick, repeatable accessibility check:

Recap & quick check

You build for everyone now. Next we make sure your sites are fast with web performance and optimization.