508 Accessibility Checklist

<!-- Proper heading structure -->
<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>
  <h2>Another Section</h2>

<!-- Accessible form -->
<form>
  <label for="email">Email Address *</label>
  <input type="email" id="email" name="email" required
         aria-describedby="email-hint">
  <span id="email-hint">We'll never share your email</span>
</form>

<!-- Accessible link -->
<a href="/reports">Download quarterly report (PDF, 2MB)</a>

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

<!-- Data table -->
<table>
  <caption>Quarterly Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$1.2M</td>
      <td>$1.4M</td>
    </tr>
  </tbody>
</table>

<!-- Modal dialog -->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Action</h2>
  <p>Are you sure you want to proceed?</p>
  <button>Cancel</button>
  <button>Confirm</button>
</div>

<!-- Tabs -->
<div role="tablist" aria-label="Settings tabs">
  <button role="tab" aria-selected="true" aria-controls="panel-1">General</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2">Security</button>
</div>
<div role="tabpanel" id="panel-1">General settings content</div>
<div role="tabpanel" id="panel-2" hidden>Security settings content</div>

<!-- Live region for updates -->
<div aria-live="polite" aria-atomic="true">
  <!-- Status messages appear here -->
</div>

<!-- Bad -->
<img src="logo.png">

<!-- Good -->
<img src="logo.png" alt="Company Name">

<!-- Decorative -->
<img src="decoration.png" alt="">

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

/* Good - enhanced focus */
:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Bad - 2.5:1 ratio */
.text { color: #888888; background: #ffffff; }

/* Good - 7:1 ratio */
.text { color: #333333; background: #ffffff; }

<!-- Bad -->
<input type="text" placeholder="Enter name">

<!-- Good -->
<label for="name">Name</label>
<input type="text" id="name" placeholder="John Doe">