Principle 1
01 / 10
Perceivable
Information and UI components must be presented in ways users can perceive — through sight, sound, or touch. If users can’t sense it, they can’t use it.
The Four Principles
Principle 2
02 / 10
Operable
UI components and navigation must be operable. If something requires a mouse with pixel-perfect aim or a steady hand, large portions of users are locked out.
Principle 3
03 / 10
Understandable
Information and the operation of the UI must be understandable. Predictable behavior and plain language matter as much as visual design.
Principle 4
04 / 10
Robust
Content must be robust enough to be reliably interpreted by user agents — including assistive technologies. Today’s accessible page must still be accessible to tomorrow’s screen readers and devices.
Key Success Criteria
SC 1.4.3
05 / 10
Color Contrast (1.4.3)
Text against its background must reach 4.5:1 for normal text or 3:1 for large text (18pt+, or 14pt+ bold). Anything below makes copy unreadable for low-vision users.
SC 1.1.1
06 / 10
Text Alternatives (1.1.1)
Every non-text element needs a text alternative that conveys the same meaning. Decorative images use empty alt; informative images describe the content.
SC 2.1.1
07 / 10
Keyboard Accessible (2.1.1)
Every interactive element must be reachable and operable using a keyboard. No mouse-only menus, no drag-and-drop without a fallback, no hover-only reveal of critical info.
SC 2.4.7
08 / 10
Focus Visible (2.4.7)
Keyboard focus must always be visible. Removing the default outline without providing a clearer replacement strands keyboard users — they literally cannot see where they are.
SC 2.5.5
09 / 10
Touch Target Size (2.5.5)
Pointer targets must be at least 24×24 CSS pixels (AA, WCAG 2.2) — 44×44 for AAA. Tiny tap targets make mobile sites useless for anyone with low precision or large fingers.
SC 4.1.2
10 / 10
Name, Role, Value (4.1.2)
Every UI component must expose its name, role, and current state to assistive technology. Use the right element for the right job — <button> for actions, <a href> for navigation, <label> for inputs. ARIA only when native HTML can’t express it.
✦
Accessibility in the Age of AI
AI is becoming both a way to generate accessibility metadata at scale and the assistive layer itself — neither replaces human review.
✦ AI Era
AI-Generated Alt Text & Captions
Vision and speech models can describe images and transcribe audio at scale. But the output needs review — a confident, wrong caption is worse than none at all.
✦ AI Era
AI as the New Assistive Layer
Screen readers, live captions, and “explain this page” are becoming AI features. Ship clean semantics so the model has accurate structure to work from.