search

Lab 13: Accessibility & ARIA

hashtag
Objective

Build inclusive web experiences that work for everyone — including users of screen readers, keyboard navigation, and assistive technologies — using semantic HTML, ARIA attributes, and WCAG best practices.

hashtag
Background

Over 1 billion people worldwide have some form of disability. Accessibility (a11y) ensures your website works for screen reader users, keyboard-only users, people with motor impairments, and those with low vision. Beyond ethics, accessibility is often legally required (ADA, WCAG 2.1 AA).

hashtag
Time

35 minutes

hashtag
Prerequisites

  • Lab 07: CSS Flexbox

  • Lab 09: Responsive Design

  • Lab 11: Forms

hashtag
Tools

docker run --rm -it -v /tmp:/workspace zchencow/innozverse-htmlcss:latest bash

hashtag
Lab Instructions

hashtag
Step 1: Semantic HTML Structure

Write this file:

💡 Semantic elements communicate meaning to screen readers and search engines. <article> is self-contained content. <section> groups related content with a heading. <aside> is tangentially related. <nav> marks navigation. lang="en" on <html> lets screen readers use the right pronunciation.

📸 Verified Output:

hashtag
Step 2: ARIA Roles and Labels

Write this file:

💡 ARIA rules of thumb: 1) Use semantic HTML first — <button> not <div role="button">. 2) aria-label overrides visible text for screen readers. 3) aria-describedby adds supplementary description. 4) aria-live="polite" announces dynamic updates without interrupting. 5) aria-hidden="true" hides decorative elements.

📸 Verified Output:

hashtag
Step 3: Keyboard Navigation & tabindex

Write this file:

💡 tabindex rules: tabindex="0" adds to natural tab order. tabindex="-1" allows programmatic focus (.focus()) without being in the tab order — perfect for error messages and modals. tabindex="1" and above disrupts natural tab order — avoid it. Use roving tabindex for widget navigation (arrow keys inside, Tab out).

📸 Verified Output:

hashtag
Step 4: Skip Links & Focus Indicators

Write this file:

💡 Skip links are the #1 keyboard accessibility feature. Place them as the first element in <body>. They should be visually hidden until focused (using a negative top value, not display:none — display:none removes from tab order). The target (#main-content) should have tabindex="-1" so browsers send focus there.

📸 Verified Output:

hashtag
Step 5: Color Contrast (WCAG AA)

Write this file:

💡 WCAG AA contrast ratios: 4.5:1 for normal text (under 18px), 3:1 for large text (18px+ or 14px bold), 3:1 for UI components (buttons, icons). Use tools like WebAIM Contrast Checker or browser DevTools. Never use color as the only visual differentiator — add icons, patterns, or text.

📸 Verified Output:

hashtag
Step 6: Screen Reader Friendly Forms

Write this file:

💡 Accessible form checklist: Every input needs a visible <label> connected via for/id. Error messages use role="alert" (announces immediately) or aria-live="polite". aria-invalid="true" signals invalid state to screen readers. aria-describedby links hints and errors to inputs. fieldset+legend groups related controls. autocomplete enables autofill.

📸 Verified Output:

hashtag
Step 7: Accessible Modal Dialog

Write this file:

💡 Accessible modal checklist: role="dialog" + aria-modal="true" + aria-labelledby pointing to the title. When opened: move focus inside, trap Tab/Shift+Tab, close on Escape. When closed: return focus to the element that opened it. This pattern prevents screen reader users from interacting with content behind the modal.

📸 Verified Output:

hashtag
Step 8: Capstone — Accessible Product Card with ARIA

Write this file:

💡 Accessible card checklist: Use <article> for self-contained cards. Give each card a descriptive aria-label (not just "Card"). Use role="img" with aria-label on emoji/icon image areas. Star ratings: hide stars from screen readers (aria-hidden="true") and add text equivalent. Toggle buttons use aria-pressed. Prices need meaningful aria-label (not just "$139").

📸 Verified Output:

hashtag
Verification

hashtag
Summary

Technique
Implementation
Benefit

Semantic HTML

<main>, <nav>, <article>

Screen reader landmarks

ARIA labels

aria-label, aria-labelledby

Descriptive names for UI

Keyboard nav

tabindex, :focus-visible

Full keyboard access

Skip links

First link in <body>

Bypass repeated navigation

Color contrast

4.5:1 minimum ratio

Low vision accessibility

Accessible forms

label, aria-invalid, fieldset

Screen reader form support

Modal dialogs

Focus trap + Escape key

ARIA dialog pattern

hashtag
Further Reading

PreviousLab 12: CSS Variables & ThemingNextLab 14: CSS Architecture & BEM

Last updated