Courses/HTML & CSS/Web Accessibility

Web Accessibility (A11y)

Lesson 15 • Expert Track

What You'll Learn

Why accessibility matters (ethics, law, and SEO)

Semantic HTML: the foundation of accessible pages

ARIA attributes: aria-label, aria-live, role

Keyboard navigation and visible focus indicators

Colour contrast requirements (WCAG standards)

Accessible forms, images, and interactive elements

💡 Think of It Like This

Accessibility is like a building with ramps, lifts, and braille signs. Just as physical spaces must be usable by everyone — including wheelchair users and visually impaired people — websites must work for people who use screen readers, keyboard-only navigation, or have colour vision deficiencies. Over 1 billion people worldwide have some form of disability.

1. Why Accessibility Matters

Reason	Details
🧑‍🤝‍🧑 Ethical	15% of the world has a disability. The web should work for everyone.
⚖️ Legal	Many countries require WCAG compliance (ADA in US, EAA in EU).
📈 SEO	Semantic HTML and alt text improve search engine ranking.
👥 UX	Accessible sites are better for everyone — clearer, faster, more usable.

2. Semantic HTML — The Foundation

The single most important thing for accessibility: use the right HTML element for the job. Screen readers understand <button>, <nav>, and <main> — but a <div> is meaningless.

❌ Don't	✅ Do
`<div onclick="...">`	`<button>`
`<div class="nav">`	`<nav>`
`<div class="header">`	`<header>`
`<b>Title</b>`	`<h1>Title</h1>`

3. Keyboard Navigation & Focus

Many users navigate with keyboard only (Tab, Enter, Escape). All interactive elements must be focusable with a visible focus indicator.

/* ✅ Always visible focus ring */
:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* ❌ NEVER do this without a replacement */
/* :focus { outline: none; } */

Accessible Page Demo

A page with semantic HTML, focus indicators, skip links, and ARIA

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Page</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: system-ui, sans-serif;
      background: #0f172a;
      color: #e5e7eb;
    }

    /* Skip link — visible only on focus */
    .skip-link {
      position: absolute;
      top: -60px;
      left: 10px;
      background: #3b82f6;
  
...

4. Colour Contrast (WCAG Standards)

Level	Normal Text	Large Text (18pt+)
AA (required)	4.5:1 contrast ratio	3:1 contrast ratio
AAA (recommended)	7:1 contrast ratio	4.5:1 contrast ratio

💡 Pro Tip: Use browser DevTools → Accessibility panel to check contrast. Chrome shows contrast ratios when you inspect text elements.

5. Images & Alternative Text

Image Type	Alt Text Rule	Example
Informative	Describe what it shows	`alt="Golden retriever playing fetch"`
Decorative	Empty alt (not missing!)	`alt=""`
Functional (logo/icon)	Describe the action/purpose	`alt="Company homepage"`

⚠️ Common Mistakes

Using divs for buttons — <div onclick="..."> lacks keyboard support, focus management, and screen reader semantics. Use <button>.
Removing focus outlines — outline: none without a replacement makes keyboard navigation impossible.
Missing alt text — Not the same as alt="" (decorative). Missing alt entirely is an accessibility violation.
Low colour contrast — Light gray text on white background fails WCAG. Test every text/background combination.
Relying on colour alone — Don't communicate status only with colour (red/green). Add icons, text, or patterns.

🎉 Lesson Complete

You now understand the essentials of web accessibility:

✅ Use semantic HTML — the #1 accessibility improvement
✅ All interactive elements must be keyboard accessible
✅ Always provide visible focus indicators
✅ Text must meet WCAG contrast ratios (4.5:1 for normal text)
✅ Images need descriptive alt text (or empty alt for decorative)
✅ Label all form inputs with <label>