--- name: web-accessibility description: Implement web accessibility (a11y) standards following WCAG 2.1 guidelines. Use when building accessible UIs, fixing accessibility issues, or ensuring compliance with disability standards. Handles ARIA attributes, keyboard navigation, screen readers, semantic HTML, and accessibility testing. metadata: tags: accessibility, a11y, WCAG, ARIA, semantic-HTML, screen-reader platforms: Claude, ChatGPT, Gemini --- # 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: ` {isOpen && ( )} ); } ``` ### Step 3: Add ARIA Attributes Provide additional context for screen readers. **Tasks**: - `aria-label`: Define the element's name - `aria-labelledby`: Reference another element as a label - `aria-describedby`: Provide additional description - `aria-live`: Announce dynamic content changes - `aria-hidden`: Hide from screen readers **Checklist**: - [x] All interactive elements have clear labels - [x] Button purpose is clear (e.g., "Submit form" not "Click") - [x] State change announcements (aria-live) - [x] Decorative images use alt="" or aria-hidden="true" **Example** (Modal): ```tsx function AccessibleModal({ isOpen, onClose, title, children }) { const modalRef = useRef(null); // Focus trap when modal opens useEffect(() => { if (isOpen) { modalRef.current?.focus(); } }, [isOpen]); if (!isOpen) return null; return (

web-accessibility

Install this skill

Comments