web-accessibilitylisted

# 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) ### Optional Information - **Screen Reader**: NVDA, JAWS, VoiceOver (for testing) - **Automated Testing Tool**: axe-core, Pa11y, Lighthouse (default: axe-core) - **Browser**: Chrome, Firefox, Safari (default: Chrome) ### Input Example ``` Make a React modal component accessible: - Framework: React + TypeScript - WCAG Level: AA - Requirements: - Focus trap (focus stays inside the modal) - Close with ESC key - Close by clicking the background - Title/description read by screen readers ``` ## Instructions ### Step 1: Use Semantic HTML Use meaningful HTML elements to make the structure clear. **Tasks**: - Use semantic tags: `<button>`, `<nav>`, `<main>`, `<header>`, `<footer>`, etc. - Avoid overusing `<div>` and `<span>` - Use heading hierarchy (`<h1>` ~ `<h6>`) correctly - Connect `<label>` with `<input>` **Example** (❌ Bad vs ✅ Good): ```html <!-- ❌ Bad