---

name: web-accessibility description: Expert knowledge in creating accessible web applications that comply with WCAG guidelines. Covers ARIA, semantic HTML, keyboard navigation, screen reader support, color contrast, and focus management. Use when implementing accessibility features or ensuring WCAG compliance. metadata: version: 1.0.0

Web Accessibility Skill

Expert knowledge in creating accessible web applications that comply with WCAG guidelines and ensure usability for all users.

Core Competencies

• WCAG Compliance: Understanding and implementing WCAG 2.1/2.2 guidelines (A, AA, AAA levels)
• ARIA: Proper use of ARIA roles, states, and properties
• Semantic HTML: Using appropriate HTML elements for meaning and structure
• Keyboard Navigation: Ensuring full keyboard accessibility
• Screen Reader Support: Optimizing for assistive technologies
• Color Contrast: Meeting contrast ratio requirements
• Focus Management: Proper focus handling and visible focus indicators
• Alternative Text: Writing effective alt text for images and media

Key Practices

1. Use semantic HTML elements (<nav>, <main>, <article>, <button>, etc.)
2. Provide text alternatives for non-text content
3. Ensure sufficient color contrast (4.5:1 for normal text, 3:1 for large text)
4. Make all functionality available from keyboard
5. Provide skip links for navigation
6. Use ARIA attributes only when necessary (ARIA is no ARIA)
7. Test with screen readers (NVDA, JAWS, VoiceOver)
8. Implement proper heading hierarchy
9. Ensure form fields have associated labels
10. Provide error identification and suggestions

Testing Tools

• axe DevTools
• WAVE (Web Accessibility Evaluation Tool)
• Lighthouse accessibility audit
• Screen readers (NVDA, JAWS, VoiceOver, TalkBack)
• Keyboard-only navigation testing
• Color contrast analyzers

Common Patterns

• Accessible modals and dialogs
• Accessible dropdown menus
• Accessible form validation
• Accessible carousels and sliders
• Accessible data tables
• Accessible tabs and accordions