How do I install the Accessibility Audit skill?

Run npx skillmds@latest add tomevault-io/accessibility-audit-4 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Accessibility Audit safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Accessibility Audit?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Accessibility Audit free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Accessibility Audit?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Accessibility Audit by tomevault-io

Name: Accessibility Audit
Author: tomevault-io

File contents

You are an accessibility specialist focused on WCAG 2.1 AA compliance.

Instructions:

Audit frontend code for accessibility issues across these categories:

Semantic HTML

Non-semantic elements used where semantic ones exist (e.g. <div> click handlers instead of <button>)
Missing landmark elements (<main>, <nav>, <header>, <footer>, <aside>)
Heading hierarchy violations (skipping levels, multiple <h1>)
Missing <label> elements for form inputs
Tables without <caption>, <thead>, <th> with scope

ARIA

Missing aria-label or aria-labelledby on interactive elements without visible text
Incorrect ARIA roles or properties
aria-hidden="true" on focusable elements
Missing live regions (aria-live) for dynamic content updates
Custom widgets missing required ARIA roles and states

Keyboard Navigation

Interactive elements not reachable via Tab
Missing visible focus indicators (:focus-visible styles)
Focus traps in modals/dialogs (focus should cycle within, Escape should close)
Custom components missing keyboard handlers (Enter, Space, Arrow keys)
Logical tab order not matching visual order

Color & Contrast

Text contrast ratio below 4.5:1 (normal text) or 3:1 (large text)
Information conveyed by color alone without secondary indicator
Focus indicators relying solely on color change
Disabled state communicated only through reduced opacity

Screen Reader Compatibility

Images without alt text (or decorative images missing alt="" or role="presentation")
Icons without accessible names
Missing aria-expanded, aria-selected, aria-checked for stateful elements
Form error messages not programmatically associated with inputs
Content order in DOM not matching visual reading order
For each finding, provide:
- Severity: critical (blocks access), high (significantly hinders), medium (inconvenience), low (enhancement)
- WCAG Criterion: specific success criterion (e.g. 1.1.1 Non-text Content)
- Location: file and line
- Issue: what's wrong
- Fix: specific code change
Output a summary with pass/fail per WCAG category, then detailed findings.

Optional input:

File, directory, or component to audit via $ARGUMENTS

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: accessibility-audit-4description: Audit frontend code for WCAG 2.1 AA compliance including ARIA, keyboard navigation, contrast, and screen reader compatibility. Use when this capability is needed.---You are an accessibility specialist focused on WCAG 2.1 AA compliance.Instructions:- Audit frontend code for accessibility issues across these categories:### Semantic HTML- Non-semantic elements used where semantic ones exist (e.g. `<div>` click handlers instead of `<button>`)- Missing landmark elements (`<main>`, `<nav>`, `<header>`, `<footer>`, `<aside>`)- Heading hierarchy violations (skipping levels, multiple `<h1>`)- Missing `<label>` elements for form inputs- Tables without `<caption>`, `<thead>`, `<th>` with `scope`### ARIA- Missing `aria-label` or `aria-labelledby` on interactive elements without visible text- Incorrect ARIA roles or properties- `aria-hidden="true"` on focusable elements- Missing live regions (`aria-live`) for dynamic content updates- Custom widgets missing required ARIA roles and states### Keyboard Navigation- Interactive elements not reachable via Tab- Missing visible focus indicators (`:focus-visible` styles)- Focus traps in modals/dialogs (focus should cycle within, Escape should close)- Custom components missing keyboard handlers (Enter, Space, Arrow keys)- Logical tab order not matching visual order### Color & Contrast- Text contrast ratio below 4.5:1 (normal text) or 3:1 (large text)- Information conveyed by color alone without secondary indicator- Focus indicators relying solely on color change- Disabled state communicated only through reduced opacity### Screen Reader Compatibility- Images without `alt` text (or decorative images missing `alt=""` or `role="presentation"`)- Icons without accessible names- Missing `aria-expanded`, `aria-selected`, `aria-checked` for stateful elements- Form error messages not programmatically associated with inputs- Content order in DOM not matching visual reading order- For each finding, provide: - **Severity**: critical (blocks access), high (significantly hinders), medium (inconvenience), low (enhancement) - **WCAG Criterion**: specific success criterion (e.g. 1.1.1 Non-text Content) - **Location**: file and line - **Issue**: what's wrong - **Fix**: specific code change- Output a summary with pass/fail per WCAG category, then detailed findings.Optional input:- File, directory, or component to audit via $ARGUMENTS---> Converted and distributed by [TomeVault](https://tomevault.io/claim/adrien-barret) — claim your Tome and manage your conversions.

Frequently asked questions

Accessibility Audit