Accessibility Best Practices

<img src="breaking-news.jpg" alt="News photo" />

<img 
  src="breaking-news.jpg" 
  alt="Protesters gather outside city hall holding signs demanding climate action" 
/>

<video controls>
  <source src="lecture.mp4" type="video/mp4" />
  <track kind="captions" src="lecture-captions.vtt" srclang="en" />
</video>

<video controls>
  <source src="lecture.mp4" type="video/mp4" />
  <track kind="captions" src="lecture-captions.vtt" srclang="en" label="English" default />
  <track kind="descriptions" src="lecture-audio-desc.vtt" srclang="en" />
  <track kind="chapters" src="lecture-chapters.vtt" srclang="en" />
</video>
<div class="media-controls">
  <button onclick="toggleAudioDesc()">Toggle Audio Description</button>
  <button onclick="showTranscript()">View Transcript</button>
  <button onclick="adjustPlaybackSpeed()">Playback Speed</button>
</div>

<div class="account-status">
  <span class="status-active">Active</span>
  <span class="status-suspended" style="color: #ff9800;">Suspended</span>
  <span class="status-closed" style="color: #f44336;">Closed</span>
</div>

<div class="account-status">
  <span class="status status-active">
    <span class="icon" aria-hidden="true">●</span>
    <span class="label">Active</span>
  </span>
  <span class="status status-suspended">
    <span class="icon" aria-hidden="true">⚠</span>
    <span class="label">Suspended</span>
  </span>
  <span class="status status-closed">
    <span class="icon" aria-hidden="true">✕</span>
    <span class="label">Closed</span>
  </span>
</div>

<style>
.status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.status-active { color: #2e7d32; border-left: 3px solid #2e7d32; }
.status-suspended { color: #f57c00; border-left: 3px solid #f57c00; }
.status-closed { color: #d32f2f; border-left: 3px solid #d32f2f; }
</style>

<table>
  <thead>
    <tr>
      <th><button onclick="sort('name')">Name</button></th>
      <th><button onclick="sort('date')">Date</button></th>
    </tr>
  </thead>
  <tbody>
    {/* Rows */}
  </tbody>
</table>

<table role="grid" aria-label="Customer data table">
  <thead>
    <tr>
      <th>
        <button 
          onclick="sort('name')"
          aria-sort={sortColumn === 'name' ? sortDirection : 'none'}
          aria-label="Sort by name"
        >
          Name
          {sortColumn === 'name' && (sortDirection === 'asc' ? '↑' : '↓')}
        </button>
      </th>
      <th>
        <button 
          onclick="sort('date')"
          aria-sort={sortColumn === 'date' ? sortDirection : 'none'}
          aria-label="Sort by date"
        >
          Date
          {sortColumn === 'date' && (sortDirection === 'asc' ? '↑' : '↓')}
        </button>
      </th>
    </tr>
  </thead>
  <tbody>
    {/* Rows with proper ARIA */}
  </tbody>
</table>

<div class="table-controls" role="toolbar" aria-label="Table controls">
  <button onclick="firstPage()" aria-label="First page">⏮</button>
  <button onclick="prevPage()" aria-label="Previous page">⏪</button>
  <span aria-live="polite">Page 1 of 10</span>
  <button onclick="nextPage()" aria-label="Next page">⏩</button>
  <button onclick="lastPage()" aria-label="Last page">⏭</button>
</div>

<label for="zip">ZIP Code</label>
<input type="text" id="zip" aria-required="true" />
<span id="zip-error" role="alert" hidden>
  ZIP code is required
</span>

<div class="form-field">
  <label for="zip">
    ZIP Code <span aria-label="required">*</span>
  </label>
  <input 
    type="text" 
    id="zip"
    pattern="[0-9]{5}(-[0-9]{4})?"
    aria-required="true"
    aria-describedby="zip-hint zip-error zip-suggestion"
    aria-invalid={hasError}
    onBlur={validateZip}
  />
  <p id="zip-hint" class="hint">
    Enter 5-digit ZIP code (e.g., 12345) or ZIP+4 (e.g., 12345-6789)
  </p>
  <div id="zip-error" role="alert" aria-live="polite" hidden>
    <span class="error-icon" aria-hidden="true">⚠</span>
    Invalid ZIP code format
  </div>
  <div id="zip-suggestion" class="suggestion" hidden>
    <p>We found a matching address:</p>
    <button 
      type="button"
      onclick="fillAddress(suggestedAddress)"
      class="suggestion-button"
    >
      Use suggested address
    </button>
  </div>
</div>