accessibility-checklist

When to Use

When building UI components, forms, or any user-facing interface. Check before every frontend PR.

Patterns

Keyboard Navigation

<!-- All interactive elements focusable -->
<button>Click me</button>  <!-- ✅ Naturally focusable -->
<div role="button" tabindex="0">Click me</div>  <!-- ✅ Made focusable -->

<!-- Focus visible and not obscured (WCAG 2.2) -->
button:focus { outline: 2px solid blue; }

Screen Reader Support

<!-- Images -->
<img src="chart.png" alt="Sales increased 20% in Q4" />