accessibility

Accessibility Best Practices

Overview

Standard	Target
WCAG	2.1 AA
Focus	Keyboard navigation
Screen readers	Full support
Color contrast	4.5:1 minimum

---

Semantic HTML

Use Correct Elements

// ❌ Bad - Div soup
<div onClick={handleClick}>Click me</div>
<div class="heading">Title</div>
<div class="list">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

// ✅ Good - Semantic elements
<button onClick={handleClick}>Click me</button>
<h1>Title</h1>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Landmark Regions

// ✅ Use semantic landmarks
<header>
  <nav aria-label="Main navigation">
    {/* Navigation links */}
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    {/* Content */}
  </article>
  
  <aside aria-label="Related articles">
    {/* Sidebar */}
  </aside>
</main>

<footer>
  {/* Footer content */}
</footer>

---

Images and Media

Alt Text

// ✅ Descriptive alt text
<img 
  src="/chart.png" 
  alt="Bar chart showing sales increased 25% from Q1 to Q2 2025"
/>

// ✅ Decorative images - empty alt
<img src="/decorative-line.png" alt="" />

// ✅ Complex images - link to description
<figure>
  <img 
    src="/infographic.png" 
    alt="Company growth infographic"
    aria-describedby="infographic-description"
  />
  <figcaption id="infographic-description">
    Detailed description of the infographic...
  </figcaption>
</figure>

Video Accessibility

// ✅ Include captions and transcripts
<video controls>
  <source src="/video.mp4" type="video/mp4" />
  <track 
    kind="captions" 
    src="/captions.vtt" 
    srcLang="en" 
    label="English captions"
    default
  />
  <track 
    kind="descriptions" 
    src="/descriptions.vtt" 
    srcLang="en" 
    label="Audio descriptions"
  />
</video>

---

Forms

Labels and Inputs

// ✅ Always associate labels with inputs
<div>
  <label htmlFor="email">Email address</label>
  <input 
    id="email"
    type="email"
    aria-describedby="email-hint email-error"
    aria-invalid={hasError}
  />
  <p id="email-hint">We'll never share your email</p>
  {hasError && (
    <p id="email-error" role="alert">Please enter a valid email</p>
  )}
</div>

// ✅ Required fields
<label htmlFor="name">
  Name <span aria-hidden="true">*</span>
  <span className="sr-only">(required)</span>
</label>
<input id="name" required aria-required="true" />