web-accessibility

Design and review accessible web interfaces using WCAG 2.2 criteria and assistive-technology testing.

10|2|Updated May 6, 2026
One-click install
npx skills add https://github.com/jcrabapple/hermes-skills --skill web-accessibility-jcrabapple
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/jcrabapple/hermes-skills/tree/main/web-accessibility
Command: npx skills add https://github.com/jcrabapple/hermes-skills --skill web-accessibility-jcrabapple

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? Visually polished interfaces can still trap keyboard users in modals, hide focus behind sticky UI, make form errors unrecoverable, or announce the wrong content to screen readers. This Skill turns a feature's user flow into explicit accessibility requirements before code is written, and structures evidence gathering so an automated scan is never mistaken for a WCAG conformance verdict. ## Core Features & Use Cases - Requirements-First Workflow: Define acceptance criteria covering keyboard, focus, forms, motion, and target browser/AT environments before implementation begins. - Pattern Decision Rules: Choose native HTML controls first, apply WAI-ARIA 1.2 only when native semantics fall short, and document full interaction contracts for composite widgets like tabs, comboboxes, and dialogs. - Hybrid Testing & Evidence: Combine bounded automated checks with manual keyboard protocols, accessibility-tree inspection, and screen-reader task completion, recording pass/fail/blocked results per criterion. - Use Case: Ask your agent to design an accessible profile editor modal, and it will produce keyboard, focus restoration, form recovery, and browser/AT verification requirements plus a release evidence record. ## Quick Start Ask your agent to turn a feature flow into accessibility acceptance criteria, for example: design an accessible profile editor modal with keyboard, focus, form recovery, and browser/AT verification requirements before writing code.

Frequently Asked Questions about web-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a modal dialog accessible?▼

Prefer the native <dialog> element with showModal() when the target environment supports it. Define an accessible name, intentional initial focus, a visible close path, inert background content, and logical focus restoration, then verify behavior in the actual browser and assistive-technology combinations.

When should I use ARIA instead of native HTML?▼

Use WAI-ARIA 1.2 only when native host-language semantics do not provide the required behavior. ARIA changes semantics but does not create keyboard behavior or visual presentation, so native elements like button, dialog, and form controls should be evaluated first.

Can an automated accessibility scan prove WCAG conformance?▼

No. Automated tools execute bounded rules against a particular DOM state and cannot judge alt text quality, focus order logic, widget keyboard contracts, or task completion. A conformance claim requires a complete scoped evaluation including manual keyboard, accessibility-tree, and screen-reader testing.

What is the WCAG 2.2 target size requirement for buttons?▼

WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum) requires 24 by 24 CSS pixels at Level AA, subject to spacing, equivalent, inline, user-agent, and essential exceptions. Document the applicable exception rather than treating every small target as a failure.

Does this accessibility guidance work with React or other frameworks?▼

Yes. The semantic and interaction contract is framework-agnostic and defined before implementation. After requirements are set, consult the current official documentation for your chosen framework or component library to implement the contract.

When should responsive navigation use ARIA menu roles?▼

Ordinary responsive site navigation should remain a disclosure button controlling ordinary links, not an ARIA menu. Reserve menu and menuitem roles for application-style menus where you implement the full arrow-key, Home/End, Escape, and focus entry/return keyboard contract.