skills.rest
brayandiazc
brayandiazcCOMMUNITY
Explore all skills by this author →
Website𝕏@brayandiazcGitHub

accessibility-audit

Audits UI code for WCAG accessibility issues including contrast, keyboard navigation, focus, and ARIA.

15|22|Updated May 5, 2024
Search Tags:#code review#accessibility#a11y#keyboard navigation#wcag#aria#ui audit
One-click install
npx skills add https://github.com/brayandiazc/project-starter-template-es-ai --skill accessibility-audit-brayandiazc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-audit
Source: https://github.com/brayandiazc/project-starter-template-es-ai/tree/main/.claude/skills/accessibility-audit
Command: npx skills add https://github.com/brayandiazc/project-starter-template-es-ai --skill accessibility-audit-brayandiazc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI changes often ship with accessibility regressions — poor color contrast, keyboard traps, missing focus indicators, or incorrect ARIA usage — that are only discovered after release. This Skill reviews UI code against a structured accessibility checklist so issues are caught with concrete file-and-line fixes before they reach users. ## Core Features & Use Cases - Contrast and Visual Checks: Verifies text and meaningful UI elements meet contrast ratios for their size and role, and that reduced-motion and zoom behavior are respected. - Keyboard and Focus Review: Confirms all interactive elements are keyboard-operable, tab order is logical, focus indicators are visible, and focus is managed correctly in modals, menus, and route changes. - Semantics and ARIA Audit: Checks that native elements are preferred, ARIA roles and attributes are used correctly, form fields have associated labels, and images have appropriate alt text. - Use Case: Before merging a new modal component, ask for an a11y review and receive a Pass / Fail / Requires-manual-review checklist with file:line references and concrete fixes, such as adding an aria-label to an icon-only button. ## Quick Start Ask the assistant to audit the accessibility of the form or modal you just changed and report any WCAG issues with fixes.

Frequently Asked Questions about accessibility-audit

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

FAQPage Schema
How do I check my UI code for WCAG accessibility issues?▼

Request an accessibility audit of the changed UI files. The review checks contrast ratios, keyboard operability, focus management, semantic HTML and ARIA usage, and alt text, then reports each item as Pass, Fail, or Requires-manual-review with file:line references and fixes.

What accessibility checks does a static code review cover?▼

Static review covers color contrast, keyboard reachability and tab order, visible focus indicators, focus handling in modals and menus, correct ARIA roles and attributes, form label associations, and image alt text. It also flags reduced-motion and zoom usability concerns.

Can a code review certify full WCAG compliance?▼

No. A static review cannot certify full WCAG conformance because some criteria require manual testing with assistive technologies like screen readers. The audit explicitly marks items that need manual or assistive-technology verification instead of claiming total compliance.

How is an accessibility audit different from a design system audit?▼

The accessibility audit covers contrast, keyboard, focus, and ARIA concerns, while a design system audit covers tokens, primitives, data states, and visual hierarchy. Components referred from a design system review are checked against the accessibility checklist here.

What are common ARIA mistakes found in UI code?▼

Common findings include icon-only buttons without accessible names, ARIA attributes used where native elements like button or label would suffice, and form fields lacking associated labels. Each finding includes a concrete fix such as adding an aria-label.

Related Skills

Explore More Software Engineering Skills→
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
Anuj23105Anuj23105
1

accessibility-auditing

Tests web page and UI component accessibility compliance with WCAG 2.1 AA/AAA standards.

Community
Advanced
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
vmitsarasvmitsaras

dynamic-interface-accessibility-audit

Audits dynamic web interfaces for accessibility across dialogs, live regions, focus, and SPA transitions.

Community
Advanced