accessibility-ui-designlisted

# Accessibility (a11y) UI Design ## Purpose Accessible interfaces are NOT optional extras—they're legal requirements (ADA, WCAG). This skill ensures web interfaces work for everyone: keyboard users, screen reader users, color-blind users, and users with cognitive disabilities. Accessible design is better design for all users. ## When to use - Writing HTML markup for UI components - Designing complex interactive widgets (modals, dropdowns, tabs, date pickers) - Auditing existing user interfaces for WCAG compliance - Building custom form controls - Creating data tables or other structured content ## When NOT to use - Visual design (separate concern) - Component styling (use CSS appropriately) - Performance optimization (different concern) ## Inputs required - HTML or JSX markup - List of interactive behaviors - Understanding of WCAG 2.1 AA standards - Accessibility testing tools (axe, Lighthouse, NVDA) ## Workflow 1. **Use Semantic HTML First**: Use native elements (`<button>`, `<nav>`, `<dialog>`, `<form>`) instead of building from `<div>` 2. **Keyboard Navigation**: Ensure ALL interactive elements are reachable via Tab key and operable via Enter or Space 3. **Manage Focus**: Trap focus inside modals; return focus to trigger after close 4. **Add ARIA Only When Needed**: Apply `aria-*` attributes ONLY when native HTML is insufficient 5. **Test Color Contrast**: Verify foreground/background colors meet WCAG AA 4.5:1 ratio for text 6. **Provide Text Alternatives**: Add `alt`