accessibility-excellence

What this skill does

# Accessibility Excellence

## Overview

Accessibility is the practice of making your product usable by everyone, including people with disabilities. It's not a feature to be added later—it's a fundamental requirement that should be built into every decision you make.

This skill teaches you to think about accessibility systematically: understanding WCAG standards, implementing semantic HTML, ensuring keyboard navigation, supporting screen readers, and designing inclusively.

## Core Philosophy: Accessibility is Inclusion

Accessibility benefits everyone, not just people with disabilities:

- **Captions** help people in noisy environments, not just deaf people
- **Keyboard navigation** helps people with motor disabilities, but also power users
- **Clear language** helps people with cognitive disabilities, but also non-native speakers
- **High contrast** helps people with low vision, but also people in bright sunlight
- **Transcripts** help deaf people, but also people who prefer reading

When you design for accessibility, you design for everyone.

## WCAG Standards

The Web Content Accessibility Guidelines (WCAG) define accessibility standards. There are three levels:

**WCAG 2.1 Levels:**
- **Level A** — Basic accessibility
- **Level AA** — Enhanced accessibility (recommended minimum)
- **Level AAA** — Advanced accessibility (ideal, but not always practical)

### The Four Principles (POUR)

**1. Perceivable**
Information must be perceivable to users. It can't be invisible to all senses.

**Guideline 1.1: Text Alternatives**
Provide text alternatives for all non-text content (images, videos, etc.).

```html
<!-- Good -->
<img src="chart.png" alt="Sales increased 25% in Q4" />

<!-- Bad -->
<img src="chart.png" alt="chart" />
<img src="chart.png" /> <!-- No alt text -->
```

**Guideline 1.4: Distinguishable**
Make it easy to see and hear content. Ensure sufficient contrast, readable text, and clear audio.

```css
/* Good - 4.5:1 contrast ratio (WCAG AA) */
color: #030712; /* dark text */
background-color: #F9FAFB; /* light background */

/* Bad - 2.5:1 contrast ratio (fails WCAG AA) */
color: #9CA3AF; /* medium gray text */
background-color: #F9FAFB; /* light background */
```

**2. Operable**
Users must be able to navigate and interact with your product. All functionality must be available from the keyboard.

**Guideline 2.1: Keyboard Accessible**
All functionality must be available from the keyboard.

```html
<!-- Good - keyboard accessible -->
<button onClick={handleClick}>Click Me</button>

<!-- Bad - not keyboard accessible -->
<div onClick={handleClick}>Click Me</div>

<!-- Good - keyboard accessible with proper focus management -->
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
  Click Me
</div>
```

**Guideline 2.4: Navigable**
Users must be able to navigate your product easily. Provide clear navigation, focus indicators, and skip links.

```html
<!-- Good - skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Good - clear heading structure -->
<h1>Page Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>

<!-- Good - focus visible -->
<button style="outline: 2px solid #3B82F6; outline-offset: 2px;">
  Focused Button
</button>
```

**3. Understandable**
Users must be able to understand your content and how to use your product.

**Guideline 3.1: Readable**
Make text readable and understandable.

```html
<!-- Good - clear, simple language -->
<p>Save your document before closing.</p>

<!-- Bad - jargon, unclear -->
<p>Persist your artifact prior to terminating the session.</p>

<!-- Good - define abbreviations -->
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> sets web standards.</p>
```

**Guideline 3.3: Predictable**
Make your product predictable. Users should know what will happen when they interact with it.

```html
<!-- Good - clear form labels -->
<label for="email">Email Address</label>
<input id="email" type="email" />

<!-- Bad - unclear labels -->
<input type="email" placeholder="Enter your email" />

<!-- Good - clear error messages -->
<input type="email" aria-invalid="true" />
<span role="alert">Please enter a valid email address.</span>

<!-- Bad - unclear error messages -->
<input type="email" style="border: 1px solid red;" />
```

**4. Robust**
Your product must be robust enough to be interpreted by a wide variety of assistive technologies.

**Guideline 4.1: Compatible**
Maximize compatibility with assistive technologies. Use semantic HTML and ARIA appropriately.

```html
<!-- Good - semantic HTML -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Bad - non-semantic HTML -->
<div class="nav">
  <div class="nav-item"><span onclick="navigate('/')">Home</span></div>
  <div class="nav-item"><span onclick="navigate('/about')">About</span></div>
</div>

<!-- Good - ARIA for custom components -->
<div
  role="button"
  tabIndex={0}
  aria-pressed={isPressed}
  onClick={toggle}
  onKeyDown={(e) => e.key === 'Enter' && toggle()}
>
  Toggle
</div>
```

## Semantic HTML

Semantic HTML is the foundation of accessibility. Use HTML elements that describe their meaning, not just their appearance.

### Common Semantic Elements

| Element | Purpose | When to Use |
| :--- | :--- | :--- |
| `<header>` | Introductory content | Top of page or section |
| `<nav>` | Navigation links | Main navigation, breadcrumbs |
| `<main>` | Main content | Primary content area |
| `<article>` | Self-contained content | Blog posts, news articles |
| `<section>` | Thematic grouping | Chapters, sections of content |
| `<aside>` | Tangential content | Sidebars, related links |
| `<footer>` | Footer content | Bottom of page or section |
| `<h1>-<h6>` | Headings | Page structure and hierarchy |
| `<button>` | Clickable button | User actions |
| `<a>` | Link | Navigation |
| `<form>` | Form container | Data collection |
| `<label>` | Form label | Associate text with form input |
| `<input>` | Form input | User input |
| `<textarea>` | Multi-line text input | Longer text input |
| `<select>` | Dropdown menu | Option selection |

### Semantic HTML Example

```html
<!-- Good - semantic HTML -->
<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Article Title</h1>
      <p>Article content...</p>
    </article>

    <aside>
      <h2>Related Articles</h2>
      <ul>
        <li><a href="/article-1">Article 1</a></li>
        <li><a href="/article-2">Article 2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Company</p>
  </footer>
</body>
```

## Keyboard Navigation

### Tab Order

Ensure a logical tab order through your page. By default, tab order follows the HTML source order.

```html
<!-- Good - logical tab order -->
<button>First</button>
<button>Second</button>
<button>Third</button>

<!-- Bad - illogical tab order (don't use tabindex > 0) -->
<button tabIndex={3}>Third</button>
<button tabIndex={1}>First</button>
<button tabIndex={2}>Second</button>

<!-- Good - skip interactive elements that aren't visible -->
<a href="#main-content" className="skip-link">Skip to main content</a>
<nav><!-- navigation --></nav>
<main id="main-content"><!-- main content --></main>
```

### Focus Management

Ensure focus is visible and managed appropriately:

```css
/* Good - visible focus indicator */
button:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* Bad - no focus indicator */
button:focus {
  outline: none;
}

/* Good - focus trap in modal */
const Modal = () => {
  const firstButtonRef = useRef(null);
  const lastButtonRef = useRef(null);

  const handleKeyDown = (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstButtonRef.c