Web Accessibility Audit

Reviews web pages and components for WCAG 2.2 compliance at levels A, AA, and AAA. Identifies accessibility barriers including missing alt text, insufficient color contrast, keyboard traps, missing ARIA labels, improper heading hierarchy, inaccessible forms, focus management issues, and dynamic content announcement problems, with specific code-level remediation steps.

Usage

Provide HTML/JSX code, a component description, or a URL for accessibility review. Specify the target WCAG conformance level (A, AA, or AAA) and any specific concerns (keyboard navigation, screen reader support, color contrast). The skill performs a thorough audit and provides prioritized fixes with corrected code examples.

Examples

• "Audit this navigation component for keyboard accessibility and screen reader support"
• "Check this form for proper label associations, error messaging, and required field indicators"
• "Review this modal dialog for focus trapping, escape key handling, and background inert behavior"
• "Audit this data table for proper header associations, sortable column announcements, and caption"

Guidelines

• Use semantic HTML elements (nav, main, article, button) before reaching for ARIA roles
• Ensure all interactive elements are keyboard accessible with visible focus indicators (2px minimum)
• Maintain a logical heading hierarchy (h1-h6) without skipping levels for document structure
• Provide text alternatives: alt for images, aria-label for icon buttons, captions for video
• Ensure color contrast ratios meet WCAG AA: 4.5:1 for normal text, 3:1 for large text and UI components
• Use aria-live regions to announce dynamic content changes to screen readers
• Test with actual screen readers (NVDA, VoiceOver, JAWS) not just automated tools
• Ensure custom widgets follow WAI-ARIA Authoring Practices patterns for expected keyboard interactions