WCAG Accessibility Practices
Application skill for W3C WCAG 2.1 Level AA ingest (awesome-guidelines). Semantic HTML baseline: frontend-markup-practices. Copy/docs a11y: mailchimp-content-practices, google-devdocs-practices.
Core Principle
Accessible web content satisfies WCAG 2.1 Level AA, perceivable without vision-only cues, operable by keyboard, understandable forms/language, robust for assistive technology, verified with automated and manual checks.
When to Use / NOT
- Shipping pages, flows, or components claiming AA conformance.
- PR review on UI, design tokens, forms, modals, SPAs.
- Accessibility audit before release or procurement.
NOT when:
- Static HTML/CSS style only,
frontend-markup-practices (pair with this for SC coverage).
- Native iOS/Android apps, platform accessibility HIG primary.
- Marketing copy tone,
mailchimp-content-practices (still pair for SC 2.4.4, 3.1.1).
Workflow
- Perceivable, alt text, structure, contrast, reflow (
wcag-perceivable-media-text.md).
- Operable, keyboard, focus, navigation, pointer/motion (
wcag-operable-keyboard-focus.md).
- Understandable, lang, predictability, forms/errors (
wcag-understandable-forms-language.md).
- Robust, name/role/value, status messages, verification (
wcag-robust-verify.md).
- Verify, scoped A+AA checklist + axe/Lighthouse + keyboard + screen reader sample.
Red Flags
- Informative image missing
alt or filename alt
- Color-only state/error (no text/icon)
<div>/<span> click handlers without keyboard + role/nameoutline: none without visible :focus-visible replacement- Placeholder used as only label
- Icon-only control without accessible name
- Modal without escape and focus restore
- Missing
<html lang="…">
- Unexpected route/context change on focus/input
- “Click here” / “Read more” links out of context
- Duplicate
id values in DOM
- Custom widget missing ARIA state updates
- Toast/alert visual-only, no live region
- AA claim from automated scan only
- Testing only mouse, never Tab/Shift+Tab
Verification
- axe-core or Lighthouse on scoped URLs (zero serious/critical for claim scope)
- Manual keyboard-only traversal of changed flows
- 200% zoom + 320px width spot check
- Contrast check on text and UI components (4.5:1 / 3:1)
- Screen reader sample (NVDA/VoiceOver) on new widgets
- Failures mapped to WCAG 2.1 SC ids in review notes
References
awesome-guidelines/references/wcag-accessibility-learning-note.mdawesome-guidelines/references/wcag-perceivable-media-text.mdawesome-guidelines/references/wcag-operable-keyboard-focus.mdawesome-guidelines/references/wcag-understandable-forms-language.mdawesome-guidelines/references/wcag-robust-verify.md
Related skills
frontend-markup-practices, semantic HTML/CSS separationmailchimp-content-practices, inclusive UI copygoogle-devdocs-practices, developer doc accessibility
1---2name: wcag-accessibility-practices3description: Use when auditing or building web UI for WCAG 2.1 Level AA, POUR success criteria, keyboard/focus, contrast/reflow, forms/errors, name-role-value, and axe plus manual verification.4---56# WCAG Accessibility Practices78Application skill for W3C WCAG 2.1 Level AA ingest (`awesome-guidelines`). Semantic HTML baseline: `frontend-markup-practices`. Copy/docs a11y: `mailchimp-content-practices`, `google-devdocs-practices`.910## Core Principle1112Accessible web content satisfies **WCAG 2.1 Level AA**, perceivable without vision-only cues, operable by keyboard, understandable forms/language, robust for assistive technology, verified with automated **and** manual checks.1314## When to Use / NOT1516- Shipping pages, flows, or components claiming AA conformance.17- PR review on UI, design tokens, forms, modals, SPAs.18- Accessibility audit before release or procurement.1920**NOT when:**2122- Static HTML/CSS style only, `frontend-markup-practices` (pair with this for SC coverage).23- Native iOS/Android apps, platform accessibility HIG primary.24- Marketing copy tone, `mailchimp-content-practices` (still pair for SC 2.4.4, 3.1.1).2526## Workflow27281. **Perceivable**, alt text, structure, contrast, reflow (`wcag-perceivable-media-text.md`).292. **Operable**, keyboard, focus, navigation, pointer/motion (`wcag-operable-keyboard-focus.md`).303. **Understandable**, lang, predictability, forms/errors (`wcag-understandable-forms-language.md`).314. **Robust**, name/role/value, status messages, verification (`wcag-robust-verify.md`).325. **Verify**, scoped A+AA checklist + axe/Lighthouse + keyboard + screen reader sample.3334## Red Flags3536- Informative image missing `alt` or filename alt37- Color-only state/error (no text/icon)38- `<div>`/`<span>` click handlers without keyboard + role/name39- `outline: none` without visible `:focus-visible` replacement40- Placeholder used as only label41- Icon-only control without accessible name42- Modal without escape and focus restore43- Missing `<html lang="…">`44- Unexpected route/context change on focus/input45- “Click here” / “Read more” links out of context46- Duplicate `id` values in DOM47- Custom widget missing ARIA state updates48- Toast/alert visual-only, no live region49- AA claim from automated scan only50- Testing only mouse, never Tab/Shift+Tab5152## Verification5354- axe-core or Lighthouse on scoped URLs (zero serious/critical for claim scope)55- Manual keyboard-only traversal of changed flows56- 200% zoom + 320px width spot check57- Contrast check on text and UI components (4.5:1 / 3:1)58- Screen reader sample (NVDA/VoiceOver) on new widgets59- Failures mapped to WCAG 2.1 SC ids in review notes606162## References6364- `awesome-guidelines/references/wcag-accessibility-learning-note.md`65- `awesome-guidelines/references/wcag-perceivable-media-text.md`66- `awesome-guidelines/references/wcag-operable-keyboard-focus.md`67- `awesome-guidelines/references/wcag-understandable-forms-language.md`68- `awesome-guidelines/references/wcag-robust-verify.md`6970## Related skills7172- `frontend-markup-practices`, semantic HTML/CSS separation73- `mailchimp-content-practices`, inclusive UI copy74- `google-devdocs-practices`, developer doc accessibility
ryan-brosas