Audit web accessibility against WCAG 2.2
Audits markup or components against WCAG 2.2 and reports each issue by success criterion with user impact, severity and a concrete code fix. Use before a release or a compliance review.
An accessibility audit is useful when each finding names who is blocked, cites the exact success criterion, and comes with a fix a developer can paste. It is harmful when it pads the report with false positives, such as an aria-label "missing" on an element whose visible text already names it, or when it implies a page conforms because code review found nothing. Automated checkers catch only a minority of WCAG failures. Judgement and assistive-technology testing cover the rest.
Audit against WCAG 2.2 level .
- Get the material. Read the code, or fetch and inspect the rendered page if given a URL. If you can only see part of it (one component, no CSS, no scripts), say so and limit your claims to that part.
- Work through every criterion at the target level. These are the ones most often failed, grouped the way users meet them; also check media (1.2.x), timing (2.2.x), flashing (2.3.1), resize text (1.4.4) and input purpose (1.3.5) whenever the target contains them:
- Perceivable: text alternatives (1.1.1), info and relationships (1.3.1), meaningful sequence, use of colour (1.4.1), contrast (1.4.3, 1.4.11), reflow (1.4.10), text spacing (1.4.12), content on hover or focus (1.4.13).
- Operable: keyboard (2.1.1) and no keyboard trap (2.1.2), bypass blocks (2.4.1), page titled, focus order (2.4.3), link purpose, focus visible (2.4.7), focus not obscured (2.4.11), pointer gestures, dragging movements (2.5.7), target size minimum of 24 by 24 CSS pixels (2.5.8), label in name (2.5.3).
- Understandable: language of page, on focus and on input (3.2.1, 3.2.2), consistent help (3.2.6), error identification and suggestion (3.3.1, 3.3.3), labels or instructions (3.3.2), redundant entry (3.3.7), accessible authentication (3.3.8).
- Robust: name, role, value (4.1.2) and status messages (4.1.3). Note that 4.1.1 Parsing is obsolete in WCAG 2.2.
- Confirm each suspected issue against the code before reporting it. Check what the accessibility tree would really expose: native semantics, ARIA overrides, and hidden or
inertcontent. - Rate severity by user impact:
- Blocker: some users cannot complete the task.
- Serious: the task is possible only with great effort or a workaround.
- Moderate: a confusing or tiring experience.
- Minor: polish.
- Write the fix for each issue as code in the target's own framework. Prefer native HTML over ARIA.
- Report only criteria at or below . Mention higher-level wins in one line at the end, if any.
- Never state or imply that the target "is compliant" or "conforms". Say what you checked and what you found.
- Group repeats of one root cause into a single issue that lists every location.
- Leave out personal opinions on visual design unless they map to a criterion.
- Read the relevant code before making a claim about it. Do not guess what a file, function or config contains.
- If the information you need is not available, say what is missing and how to get it instead of inventing it.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
Summary
Issue counts by severity, then the three changes that unblock the most users.
Issues
Numbered, most severe first. Each one:
- SC x.x.x Name (level) — severity
- Where:
path:lineor selector - Who is affected and what happens to them
- Fix: a code block
Needs manual testing
What cannot be judged from the code alone, with the assistive technology or method to use (screen reader, 400% zoom, keyboard only, voice control).
Not covered
Parts of the target you could not see or did not check.
1 required value still a placeholder; the assistant will ask for it.
details
- kind
- Prompt: a task you run by name to get one finished thing back
- domain
- Software engineering
- category
- Accessibility
- level
- Intermediate
- made for
- Frontend engineer, QA / test engineer, Product / UX / UI designer
- needs
- repo-read, web
- risk
- network
- version
- v1.0.0 · incubating
- reviewed
- 2026-10-02
- works in
- Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf, Zed, Continue, AGENTS.md
use in
npx @hermes-hq/hodios install audit-web-accessibility --target claude-codenpx skills add hermes-hq/hodios-dist --skill audit-web-accessibility -a claude-codeclaude plugin marketplace add hermes-hq/hodios-distclaude plugin install hodios-software-engineering@hodiosThe plugin brings every entry in this domain at once.
pairs well with
All of AccessibilityAccessibility specialist
Accessibility specialist who builds and reviews with WCAG, the ARIA Authoring Practices and real assistive-technology behaviour in mind, ranking barriers by who is blocked.
accessibility-specialistFix keyboard navigation in a component
Finds and fixes keyboard barriers in a UI component (focus order, traps, invisible focus, mouse-only controls) and adds a keyboard test checklist. Use when a widget fails without a mouse.
fix-keyboard-navigationBuild or fix an accessible form
Builds or repairs a web form with programmatic labels, grouping, autocomplete, helpful error messages and announced validation. Use for sign-up, checkout, settings or any data-entry form.
fix-form-accessibilityReview colour contrast and fix the palette
Checks colour pairs or design tokens against contrast requirements and proposes the nearest passing alternatives that keep the brand hue. Use when defining or auditing a palette or theme.
review-color-contrastAudit a mobile screen for accessibility
Audits an iOS, Android, React Native or Flutter screen for labels, traits, focus order, text scaling, touch targets, contrast and gestures, with platform fixes and a VoiceOver or TalkBack test script.
audit-mobile-accessibilityBuild an accessible ARIA widget
Implements a combobox, tabs, dialog, menu, disclosure, tree or listbox per the ARIA Authoring Practices pattern, using native elements whenever they suffice. Use for custom interactive widgets.
build-aria-widget