accessibility-checklist

name	accessibility-checklist
description	When building UI components, forms, or any user-facing interface. Check before every frontend PR.
version	1.1.0
tokens	~450
confidence	high
sources	["https://www.w3.org/WAI/WCAG22/quickref/","https://developer.mozilla.org/en-US/docs/Web/Accessibility"]
last_validated	2025-12-10T00:00:00.000Z
next_review	2025-12-24T00:00:00.000Z
tags	["accessibility","a11y","frontend","ux"]

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" />
<img src="decoration.png" alt="" />  <!-- Decorative: empty alt -->

<!-- Form labels -->
<label for="email">Email</label>
<input id="email" type="email" aria-required="true" />

<!-- Dynamic content -->
<div aria-live="polite" aria-busy="false">Loading complete