Agent skill · design visual · aiskillstore
accessibility-auditor
Reviews UI components for WCAG compliance, ARIA attributes, keyboard navigation, and screen reader support. Use when building frontend components or user requests accessibility improvements.
Why this skill is useful
Provides specific guidelines and examples for WCAG compliance that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Accessibility Auditor Audits web applications for accessibility compliance (WCAG 2.1 Level AA) and suggests improvements. When to Use Building or reviewing UI components User requests accessibility improvements Preparing for accessibility audit User mentions "accessibility", "a11y", "WCAG", "screen reader", or "keyboard navigation" Instructions 1. Semantic HTML Check Use proper HTML elements: Semantic structure: <header>, <nav>, <main>, <footer> <article>, <section>, <aside> <h1> through <h6> in proper hierarchy <button> for actions, <a> for navigation 2. ARIA Attributes When to use ARIA: Custom widgets (tabs, accordions, modals) Dynamic content updates Complex interactions When semantic HTML isn't sufficient Common ARIA attributes: First rule of ARIA: Don't use ARIA if semantic HTML works 3. Keyboard Navigation All interactive elements must be keyboard accessible: Tab order: Use tabindex="0" for custom interactive elements Avoid tabindex > 0 (creates confusing tab order) Use tabindex="-1" for programmatic focus only Focus management: Visible focus indicators Trap focus in modals Return focus when closing dialogs Skip links for main content 4. Alt Text and Images Informative images: Decorative images: Complex images: 5. Color and Contrast Contrast ratios (WCAG AA): Normal text: 4.5:1 minimum Large text (18pt+): 3:1 minimum UI components: 3:1 minimum Don't rely on color alone: 6. Forms and Labels Every input needs a label: Error messages: 7. Headings and Document Structure Proper heading hierarchy: Don't skip levels: h1 → h2 → h3 (not h1 → h3) 8. Dynamic Content Announce updates to screen readers: Loading states: 9. Screen Reader Testing Screen reader only text: Hide decorative elements: 10. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/accessibility-auditor