| name | wcag22-aa-accessibility |
| description | Audit and remediate a website to meet WCAG 2.2 Level AA accessibility. Use when checking or fixing perceivability, operability, understandability, and robustness across pages, components, forms, navigation, and interactive elements. |
| argument-hint | Page or component scope, known issues, and target output (audit report, remediated markup, or both) |
| user-invocable | true |
WCAG 2.2 Level AA Accessibility
Evaluate and remediate site content and markup so it meets WCAG 2.2 Level AA success criteria across all four principles: Perceivable, Operable, Understandable, Robust.
When to Use
- Auditing an existing page or site for accessibility compliance.
- Remediating failing markup, color, or interaction patterns.
- Reviewing a new feature or template before publication.
- Establishing a site-wide accessibility baseline.
Inputs to Gather
- Scope: full site, specific page type, or single component.
- Output required: audit findings only, remediated code, or both.
- Known assistive technology targets (screen readers, keyboard-only, voice control).
- Any existing audit results or known issues to prioritize.
If scope is unclear, default to auditing the whole site and producing both findings and remediated code.
Workflow
- Audit perceivability (content, images, color, structure).
- Audit operability (keyboard, timing, focus, navigation).
- Audit understandability (language, predictability, input assistance).
- Audit robustness (valid markup, name/role/value, assistive technology compatibility).
- Produce prioritized findings.
- Remediate all Level A and AA failures.
- Verify fixes against each success criterion.
Detailed Procedure
1) Perceivable (WCAG Principle 1)
Text alternatives (1.1)
- All non-decorative images have meaningful
alt text describing purpose, not appearance.
- Decorative images use
alt="" and no role.
- Functional images (buttons, links with images) describe the action/destination.
Time-based media (1.2) — if present
- Pre-recorded audio has a text transcript.
- Pre-recorded video has captions and audio description.
Adaptable content (1.3)
- Information conveyed through structure, not only through visual presentation.
- Reading order is correct when CSS is removed.
- Instructions do not rely solely on sensory characteristics (colour, shape, position).
- Content is not restricted to a single orientation (portrait/landscape lock fails — 1.3.4 AA).
- Input purpose is programmatically determinable for common fields (1.3.5 AA).
Distinguishable (1.4)
- Text contrast is ≥ 4.5:1 for normal text, ≥ 3:1 for large text (≥18pt / ≥14pt bold) (1.4.3 AA).
- Text can be resized to 200% without loss of content or functionality (1.4.4 AA).
- Images of text are avoided except for logotypes (1.4.5 AA).
- Content reflows without horizontal scrolling at 320px equivalent viewport width (1.4.10 AA).
- Non-text contrast for UI components and focus indicators is ≥ 3:1 (1.4.11 AA).
- Text spacing overrides (line/letter/word spacing) do not break layout (1.4.12 AA).
- Content triggered on hover/focus can be dismissed, hovered over, and persists (1.4.13 AA).
Quality checks:
- Run a color contrast check on all body text, headings, placeholder text, and interactive element labels.
- Verify reflow by setting viewport to 320px width.
Fail conditions:
- Any normal text falls below 4.5:1 contrast.
- Any interactive element or focus indicator falls below 3:1 contrast.
- Zoom to 200% causes content loss or horizontal overflow.
2) Operable (WCAG Principle 2)
Keyboard accessible (2.1)
- All functionality is operable without a mouse.
- No keyboard trap prevents focus from leaving a component (2.1.2).
- Character key shortcuts, if present, can be disabled or remapped (2.1.4 AA).
Enough time (2.2)
- Time limits can be turned off, adjusted, or extended unless essential.
- No content blinks, moves, or auto-updates in a way that cannot be paused.
Seizures and physical reactions (2.3)
- No content flashes more than 3 times per second.
Navigable (2.4)
- Blocks of content can be bypassed by a skip link (2.4.1 AA).
- Page title is descriptive and unique (2.4.2 AA).
- Focus order is logical (2.4.3 AA).
- Link purpose is determinable from link text or context (2.4.4 AA).
- Multiple ways to find content exist (search, sitemap, or navigation) (2.4.5 AA).
- Headings and labels are descriptive (2.4.6 AA).
- Focus indicator is visible (2.4.7 AA).
Input modalities (2.5)
- Pointer gestures requiring multi-point or path-based gestures have a single-pointer alternative (2.5.1 AA).
- Pointer down-events can be aborted or reversed (2.5.2 AA).
- Visible labels match accessible names on controls (2.5.3 AA).
- Motion-based activation has an alternative and can be disabled (2.5.4 AA).
- Dragging movements have a single-pointer alternative (2.5.7 AA — new in 2.2).
- Target size for pointer inputs is at least 24×24 CSS pixels (2.5.8 AA — new in 2.2).
Quality checks:
- Tab through the entire page without a mouse; verify all controls are reachable and operable.
- Check that focus indicator is visible and has sufficient contrast.
- Verify skip link is the first focusable element and works correctly.
Fail conditions:
- Any interactive element unreachable or inoperable by keyboard.
- Visible focus indicator absent on any focusable element.
- Target size below 24×24 CSS pixels without adequate spacing (2.5.8).
3) Understandable (WCAG Principle 3)
Readable (3.1)
lang attribute is set on <html> with a valid language code (3.1.1 AA).lang attribute is set on passages in a different language (3.1.2 AA).
Predictable (3.2)
- Focus does not trigger unexpected context changes (3.2.1 AA).
- Changing a form control does not trigger unexpected submission or navigation (3.2.2 AA).
- Navigation repeated across pages is consistent in order (3.2.3 AA).
- Components with the same function are identified consistently (3.2.4 AA).
- Changes of context are initiated only by user request (3.2.6 AA — new in 2.2).
Input assistance (3.3)
- Required fields and input errors are identified in text (3.3.1 AA).
- Error suggestions are provided where possible (3.3.2 AA).
- Important legal/financial actions have a review, confirm, or reverse mechanism (3.3.4 AA).
- Accessible authentication does not rely solely on a cognitive function test unless an alternative or help is provided (3.3.7 AA — new in 2.2).
- Redundant entry is not required within a single session unless essential (3.3.8 AA — new in 2.2).
Quality checks:
- Submit a form with errors and verify each error message is descriptive and associated with the field.
- Verify
lang attribute matches the page's primary language.
Fail conditions:
- Any error identified only by color or icon without a text description.
lang attribute missing or set to an invalid code.
4) Robust (WCAG Principle 4)
Compatible (4.1)
- Markup is valid: no duplicate IDs, complete start/end tags, no illegal nesting (4.1.1 AA).
- All UI components have accessible name, role, and state programmatically exposed (4.1.2 AA).
- Status messages are programmatically determinable without receiving focus (4.1.3 AA).
Quality checks:
- Run HTML validation; resolve all errors affecting name, role, or value exposure.
- Inspect all custom widgets for
role, aria-label/aria-labelledby, and state attributes.
- Verify dynamic status messages use
aria-live or equivalent.
Fail conditions:
- Duplicate IDs anywhere in the document.
- Any interactive custom widget missing name, role, or state.
- Status messages (success notices, errors) that receive no focus and have no live region.
5) Findings Report
Produce a prioritized list of failures:
- Critical — Hard WCAG 2.2 AA failures (contrast, keyboard trap, missing labels, missing alt).
- Major — Failures likely to impede specific user groups (focus order, skip links, error handling).
- Minor — Violations that degrade experience but have workarounds.
Each finding should state: criterion reference, element/location, description, and remediation action.
6) Remediation
- Fix all Critical and Major findings before marking complete.
- Document any Minor findings deferred with a rationale and owner.
- Prefer native HTML over ARIA; add ARIA only where native semantics are insufficient.
- Do not add ARIA that duplicates existing native semantics.
7) Verification
For each remediated item, re-check the specific criterion and confirm the fix does not introduce a new failure.
Completion criteria — all must pass; any failure blocks completion:
- All WCAG 2.2 Level A and AA success criteria pass for the in-scope pages.
- No Critical or Major findings remain open.
- HTML validation passes with no errors affecting accessibility.
- All forms have labels, error handling, and accessible names.
- Keyboard navigation covers all interactive elements with visible focus.
- Color contrast passes for all text and UI components.
lang attribute is present and correct.- WCAG 2.2-specific criteria (2.5.7, 2.5.8, 3.2.6, 3.3.7, 3.3.8) have been explicitly checked.
Deliverables
- Prioritized audit findings with criterion references and locations.
- Remediated HTML/CSS with inline comments noting each fix.
- Summary of deferred Minor issues with rationale.
- Verification pass confirming all Critical and Major items resolved.
Example Prompts
- /wcag22-aa-accessibility Audit this page and produce a prioritized findings report.
- /wcag22-aa-accessibility Remediate all WCAG 2.2 AA failures in this template.
- /wcag22-aa-accessibility Check this form for input assistance, error handling, and label compliance.
- /wcag22-aa-accessibility Verify the new WCAG 2.2 criteria (2.5.7, 2.5.8, 3.2.6, 3.3.7, 3.3.8) across these pages.
