generated from nhcarrigan/template
hikari
6f4c3bd41a
Implemented comprehensive accessibility improvements across the entire application to ensure WCAG 2.1 Level AA compliance. Keyboard Navigation: - Added skip-to-main-content link at the top - Enhanced focus-visible styles with 3px high-contrast outline - Added keyboard support for dropdowns (Escape to close) - Ensured all interactive elements are keyboard accessible Screen Reader Support: - Added ARIA labels throughout (buttons, navigation, forms) - Implemented ARIA live regions for dynamic content (toasts) - Added aria-expanded, aria-controls for dropdowns - Added aria-current="page" for active navigation - Proper role attributes (navigation, search, menu, dialog, alert) - Screen reader-only text for context (.sr-only class) Visual Accessibility: - High contrast focus indicators (4.5:1 ratio) - Support for prefers-reduced-motion - Support for high contrast mode - Decorative icons wrapped in aria-hidden Form Accessibility: - All inputs have proper labels or aria-label - Added aria-required and aria-invalid for validation - Error messages announced to screen readers - Proper form structure with semantic HTML Content Structure: - Skip navigation link for keyboard users - Proper heading hierarchy (h1 → h2 → h3) - Semantic HTML elements (nav, main, section, article) - Alt text for all images Interactive Components: - Modals: aria-modal, role="dialog", Escape key support - Dropdowns: aria-expanded, aria-haspopup, keyboard navigation - Buttons: descriptive aria-labels for icon buttons - Pagination: aria-current, descriptive button labels - Like buttons: aria-pressed for toggle state Files Modified: - Global styles (styles.scss) - App template (skip link) - Header navigation (ARIA attributes) - Toast notifications (live regions) - Pagination component - Like button component - Games list component - Footer component - Report modal WCAG 2.1 Compliance: ✅ 1.3.1 Info and Relationships ✅ 1.4.3 Contrast (Minimum) ✅ 2.1.1 Keyboard ✅ 2.1.2 No Keyboard Trap ✅ 2.4.1 Bypass Blocks ✅ 2.4.3 Focus Order ✅ 2.4.7 Focus Visible ✅ 3.2.4 Consistent Identification ✅ 4.1.2 Name, Role, Value ✅ 4.1.3 Status Messages The library is now fully accessible to users with disabilities!