Web Accessibility (a11y) Checklist for Developers

Web applications are inaccessible to users with disabilities. WCAG compliance seems overwhelming and developers don't know where to start.

Essential accessibility practices (covers ~80% of issues):

<!-- 1. Semantic HTML (biggest impact) -->
<nav> instead of <div class='nav'>
<button> instead of <div onclick>
<main>, <header>, <footer>, <article>, <section>
<h1> through <h6> in order (no skipping levels)

<!-- 2. Images -->
<img src='chart.png' alt='Q3 revenue increased 15% to $2.3M'>
<img src='decorative.png' alt='' role='presentation'>

<!-- 3. Forms -->
<label for='email'>Email address</label>
<input id='email' type='email' required
  aria-describedby='email-hint'
  aria-invalid='true'
  aria-errormessage='email-error'>
<span id='email-hint'>We'll never share your email</span>
<span id='email-error' role='alert'>Please enter a valid email</span>

<!-- 4. Interactive elements -->
<button aria-expanded='false' aria-controls='menu'>Menu</button>
<div id='menu' role='menu' hidden>...</div>

<!-- 5. Focus management -->
<div role='dialog' aria-modal='true' aria-labelledby='dialog-title'>
  <h2 id='dialog-title'>Confirm deletion</h2>
  <!-- Trap focus inside dialog -->
</div>

/* 6. Visual */
/* Minimum contrast: 4.5:1 for text, 3:1 for large text */
/* Focus indicator */
:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}
/* Don't rely on color alone */
.error { color: red; border-left: 3px solid red; } /* Color + border */
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

Testing: Use axe-core browser extension, VoiceOver (Mac), NVDA (Windows).

~15% of people have some form of disability. Accessibility also improves SEO, mobile UX, and is legally required in many jurisdictions (ADA, EAA).

Building accessible web applications