web-accessibility
Installation
Summary
Implement WCAG 2.1 accessibility standards for semantic HTML, keyboard navigation, ARIA attributes, and screen reader support.
- Covers semantic HTML structure, keyboard navigation (Tab, arrow keys, ESC), and focus management for modals and interactive components
- Provides ARIA attribute guidance (aria-label, aria-live, aria-hidden, role attributes) with practical React/TypeScript examples
- Includes color contrast requirements (WCAG AA/AAA), visual focus indicators, and testing strategies using axe-core and Lighthouse
- Enforces mandatory rules: keyboard-only usability, alternative text for images, associated form labels, and prohibition of outline removal
SKILL.md
Web Accessibility (A11y)
When to use this skill
- New UI Component Development: Designing accessible components
- Accessibility Audit: Identifying and fixing accessibility issues in existing sites
- Form Implementation: Writing screen reader-friendly forms
- Modals/Dropdowns: Focus management and keyboard trap prevention
- WCAG Compliance: Meeting legal requirements or standards
Input Format
Required Information
- Framework: React, Vue, Svelte, Vanilla JS, etc.
- Component Type: Button, Form, Modal, Dropdown, Navigation, etc.
- WCAG Level: A, AA, AAA (default: AA)