hermes

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.

context

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.

task

Audit against WCAG 2.2 level .

  1. 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.
  2. 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.
  1. 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 inert content.
  2. 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.
  1. Write the fix for each issue as code in the target's own framework. Prefer native HTML over ARIA.
constraints
  • 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.
output format

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:line or 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

Edit on GitHubReport a problem

use in

Hodios CLI
npx @hermes-hq/hodios install audit-web-accessibility --target claude-code
Agent Skills
npx skills add hermes-hq/hodios-dist --skill audit-web-accessibility -a claude-code
Add the Hodios marketplace (once)
claude plugin marketplace add hermes-hq/hodios-dist
Install the software-engineering plugin
claude plugin install hodios-software-engineering@hodios

The plugin brings every entry in this domain at once.

pairs well with

All of Accessibility
PersonaAccessibility

Accessibility 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-specialist
PromptAccessibility

Fix 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-navigation
PromptAccessibility

Build 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-accessibility
PromptAccessibility

Review 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-contrast
PromptAccessibility

Audit 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-accessibility
PromptAccessibility

Build 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