Chapter 3.4☕ 18 min read

Accessibility (a11y)

Include everyone — build for screen readers, keyboard users, and people with disabilities.

01What is Accessibility?

Imagine a metro station lift — wheelchair users, blind users, elderly users — everyone should be able to use it. Buttons have Braille, audio announcements play, wide doors. That's accessibility — designing for everyone, not just the majority.

Web accessibility means building websites that people with disabilities can use — blind (screen readers), deaf (captions), motor impaired (keyboard only), color blind (contrast), cognitive (clear language). WCAG (Web Content Accessibility Guidelines) is the standard — Level A, AA, AAA. India's RpDAA 2016 mandates government websites be accessible.

♿

Metro Lift Analogy: Lift without Braille = fine for sighted users, useless for blind users. Website without accessibility = same problem. ARIA = Braille for websites. Semantic HTML = wheelchair ramp.

02Core Accessibility Tools

Core accessibility tools and attributes:

alt attribute — Text description for images. <img src="charminar.jpg" alt="Charminar at night">. Missing alt = screen reader says "image" only. Empty alt alt="" = decorative image.
aria-label — Invisible label only screen readers see. <button aria-label="Close menu">✕</button>. Essential for icon buttons.
aria-labelledby — Use another element's ID as label. <h2 id="title">Biryani</h2> <div aria-labelledby="title">.
aria-describedby — Link to description element. <input aria-describedby="help"> <p id="help">Min 8 characters</p>.
aria-hidden="true" — Hide from screen readers. Decorative icons. ⚠️ Never put focusable elements inside.
role attribute — Tell screen reader what the element is. Only for custom widgets — semantic elements already have implicit roles.
aria-expanded — Accordion/menu open state. <button aria-expanded="false">Menu</button>.
aria-live — Announce dynamic content. "polite" = waits for pause, "assertive" = interrupts immediately.
tabindex — tabindex="0" = add to tab order. tabindex="-1" = programmatic focus only. tabindex="1+" = AVOID.
label + for — Connect labels to form inputs. <label for="email">Email</label> <input id="email">.
Color Contrast — WCAG AA = 4.5:1 ratio (normal text), 3:1 (large text). Gray on white = often fails.
Semantic HTML — <nav>, <main>, <article>, <section> — gives structure to screen readers.

<!-- Image with proper alt -->
<img src="biryani.jpg" alt="Hyderabadi Biryani on steel plate with raita">

<!-- Icon button with aria-label -->
<button aria-label="Close notification">✕</button>

<!-- Live region for dynamic content -->
<div aria-live="polite" id="cart">3 items in cart</div>

<!-- Form with proper labels -->
<label for="name">Your Name</label>
<input type="text" id="name" name="name" aria-required="true">

<!-- Keyboard-accessible custom button -->
<div role="button" tabindex="0"
     aria-label="Add to cart"
     onclick="addToCart()"
     onkeydown="if(event.key==='Enter') addToCart()">
  🛒
</div>

alt="description"Image text description for screen readers

aria-label="text"Invisible label — icons, custom buttons

aria-labelledby="id"Reference visible element as label

aria-describedby="id"Reference element as extra description

aria-hidden="true"Hide from screen readers

aria-live="polite"Announce dynamic changes when user pauses

tabindex="0"Add element to tab order

label for="id"Connect label to input — click target + screen reader

:focus-visibleShow outline only on keyboard focus

03Accessibility Testing Tools

Tools for testing accessibility:

Tool What it checks

✅ WCAG Standards Levels A, AA, AAA — legal compliance guide Learn → 📢 ARIA Live Regions Dynamic content announcements done right Learn → ⌨️ Keyboard Navigation Focus management, tab order, focus trapping Learn → 🎨 Color Contrast 4.5:1 ratio, tools, dark mode considerations Learn →

04How to Build an Accessible Website

Use Semantic HTMLnav, main, article, section — screen readers understand structure

→

Add Alt TextEvery meaningful image needs descriptive alt. Decorative = alt=""

→

Add ARIA Labelsaria-label for icons, aria-labelledby for references

→

Ensure Keyboard NavTab to navigate, Enter to activate. Visible focus indicators.

→

Make Forms Accessiblelabel for="id", aria-describedby for errors

→

Check Color Contrast4.5:1 normal text, 3:1 large text. WebAIM Contrast Checker.

Accessibility is not backwards — it's forwards! Accessible website = better SEO, better UX for everyone, legal compliance. Not an "extra feature" — it's a "basic requirement".

05Exercise — Accessible Biryani Menu

Build an accessible biryani menu card — proper semantics, ARIA attributes, keyboard navigation, color contrast. Test with Chrome DevTools → Accessibility panel.

Open VS Code. Create accessible-menu.html.

Use the starter code below and add accessibility features:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accessible Biryani Menu</title>
</head>
<body>
  <main>
    <h1>Paradise Biryani Menu</h1>
    <!-- TODO: Add accessible menu items -->
  </main>
</body>
</html>

Add these accessibility features:

Semantic HTML — main, article, section, h1-h3 Every image gets descriptive alt text (no filenames) Add to Cart button gets aria-label Price badge gets aria-hidden="true" Close button gets aria-label="Close notification" Notification div gets aria-live="polite" Form inputs connected with <label for> :focus-visible outline styles Color contrast check — 4.5:1 minimum ratio

💡

Testing tip: Chrome DevTools → Accessibility panel. Run Lighthouse accessibility audit — target 90+ score. Use VoiceOver (Mac) or NVDA (Windows) for real screen reader testing.

Done — Key Points:

✅ alt = image description, alt="" = decorative, no alt = fail
✅ aria-label = invisible label for icons/buttons
✅ aria-labelledby = reference existing element as label
✅ aria-hidden="true" = hide from screen readers
✅ role = only for custom widgets, not semantic elements
✅ aria-live="polite" = announce dynamic changes automatically
✅ tabindex="0" = make non-interactive element keyboard accessible
✅ Semantic HTML = free accessibility (nav, main, article, section)
✅ 4.5:1 contrast ratio minimum for normal text (WCAG AA)

Previous3.3 — Web Storage 📋 All Chapters Next Chapter3.5 — SEO Basics →