Accessibility Fundamentals

<!-- Bad: Image without alt text -->
<img src="chart.png" />

<!-- Good: Descriptive alt text -->
<img src="chart.png" alt="Bar chart showing Q3 revenue increased 25% over Q2" />

<!-- Good: Decorative image marked as such -->
<img src="decorative-border.png" alt="" role="presentation" />

<!-- Bad: Click handler on a div (not keyboard accessible) -->
<div onclick="submitForm()">Submit</div>

<!-- Good: Native button element -->
<button type="submit">Submit</button>

<!-- Good: If you must use a div, add keyboard support -->
<div
  role="button"
  tabindex="0"
  onclick="submitForm()"
  onkeydown="if(event.key= 'Enter' || event.key= ' ') submitForm()"
>
  Submit
</div>

<!-- Bad: Unclear error message -->
<span class="error">Error</span>

<!-- Good: Descriptive error linked to input -->
<label for="email">Email address</label>
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
/>
<span id="email-error" class="error" role="alert">
  Please enter a valid email address (e.g., name@example.com)
</span>

<!-- Bad: Custom widget without ARIA -->
<div class="dropdown">
  <div class="dropdown-trigger">Select option</div>
  <div class="dropdown-menu">
    <div class="dropdown-item">Option 1</div>
    <div class="dropdown-item">Option 2</div>
  </div>
</div>

<!-- Good: Proper ARIA roles and states -->
<div class="dropdown">
  <button
    aria-haspopup="listbox"
    aria-expanded="false"
    aria-labelledby="dropdown-label"
  >
    Select option
  </button>
  <ul role="listbox" aria-labelledby="dropdown-label">
    <li role="option" aria-selected="false">Option 1</li>
    <li role="option" aria-selected="false">Option 2</li>
  </ul>
</div>

Testing considerations:
- Screen reader compatibility (VoiceOver, NVDA, JAWS)
- Sufficient color contrast (4.5:1 for normal text, 3:1 for large text)
- Resizable text up to 200% without loss of functionality
- No information conveyed by color alone

Testing considerations:
- Full keyboard navigation (Tab, Enter, Space, Arrow keys, Escape)
- No time-dependent interactions (or adjustable timers)
- Large enough click/touch targets (minimum 44x44 pixels)
- No complex gestures required (pinch, multi-finger swipe)

Testing considerations:
- Captions for all video content
- Transcripts for audio content
- Visual alternatives to audio alerts
- No audio-only information

Testing considerations:
- Clear, simple language
- Consistent navigation patterns
- Error prevention and recovery
- Minimal distractions (animations, autoplay)

5-Minute Accessibility Checklist:

[ ] Navigate the entire page using only the keyboard (Tab key)
    - Can you reach every interactive element?
    - Can you see where the focus is?
    - Can you operate all controls?

[ ] Check color contrast
    - Use Chrome DevTools > Rendering > Emulate vision deficiencies
    - Or use the WebAIM contrast checker

[ ] Check images
    - Do all meaningful images have alt text?
    - Are decorative images hidden from screen readers?

[ ] Check headings
    - Is there a logical heading hierarchy (h1 > h2 > h3)?
    - Does the heading structure make sense when read alone?

[ ] Check forms
    - Does every input have a visible label?
    - Are error messages descriptive and linked to inputs?

// You can inspect the accessibility tree in Chrome DevTools:
// 1. Open DevTools (F12)
// 2. Go to Elements panel
// 3. Click the "Accessibility" tab in the sidebar
// 4. Select any element to see its accessible name, role, and state

// The accessibility tree for a button might look like:
// Role: button
// Name: "Submit form"
// State: focusable
// Description: "Submits the registration form"