WCAG Compliance
Avenue Luxe is designed to meet WCAG 2.1 Level AA accessibility standards.
Compliance Areas
Section titled “Compliance Areas”Keyboard Navigation
Section titled “Keyboard Navigation”- All interactive elements are keyboard accessible
- Visible focus indicators (gold #C9A961 ring, 3px width)
- Skip links for main content sections
- Focus trapping in modals and drawers
- ESC key closes all overlays
Screen Reader Support
Section titled “Screen Reader Support”- Proper semantic HTML throughout
- ARIA labels on all interactive elements
- ARIA live regions for dynamic content announcements
- Proper heading hierarchy maintained
- Descriptive link text
Visual Accessibility
Section titled “Visual Accessibility”- Color contrast meets 4.5:1 minimum ratio (WCAG AA)
- Focus indicators visible in all color modes
- High contrast mode support
- Reduced motion support (
prefers-reduced-motion) - Content readable at 200% zoom
Touch & Interaction
Section titled “Touch & Interaction”- Touch targets meet 44x44px minimum
- 48x48px recommended for comfortable mobile use
- No interactions require complex gestures
- All functionality available via mouse, keyboard, and touch
Theme Components Audited
Section titled “Theme Components Audited”| Component | Status |
|---|---|
| Search Overlay | Keyboard nav, focus trap, screen reader announcements |
| Cookie Consent | Keyboard accessible, ARIA labels |
| Mobile Bottom Nav | Touch targets, safe area support |
| Theme Switcher | Keyboard support, ARIA attributes |
| Cart Drawer | Focus trapping, screen reader updates |
| Quick View Modal | Full keyboard navigation, focus management |
| Product Gallery | Arrow key navigation, alt text |
| Mega Menu | Roving tabindex, arrow key support |
Accessibility Features Built In
Section titled “Accessibility Features Built In”Skip Links
Section titled “Skip Links”Users can skip to main content, navigation, footer, or search with Tab key.
Reduced Motion
Section titled “Reduced Motion”All animations respect prefers-reduced-motion. Users who prefer reduced motion see instant transitions.
High Contrast Mode
Section titled “High Contrast Mode”Enhanced visibility when prefers-contrast: high is active. Borders become more prominent and text weight increases.
Screen Reader Announcements
Section titled “Screen Reader Announcements”Dynamic content changes (cart updates, search results, filter changes, form errors) are announced via ARIA live regions.
Testing Your Store
Section titled “Testing Your Store”Manual Testing
Section titled “Manual Testing”- Navigate your entire store using only keyboard (Tab, Enter, Arrow keys, Escape)
- Test with a screen reader (VoiceOver on Mac, NVDA on Windows)
- Check color contrast with browser DevTools
- Zoom to 200% and verify no content is lost
- Enable reduced motion in OS settings and verify animations stop
Automated Testing
Section titled “Automated Testing”- Use axe DevTools browser extension
- Run Lighthouse accessibility audit
- Use WAVE (Web Accessibility Evaluation Tool)
Checklist
Section titled “Checklist”- All images have alt text
- Color contrast meets 4.5:1 ratio
- Keyboard navigation works throughout
- Focus indicators visible
- Screen reader announcements work
- Forms have proper labels
- Reduced motion respected
- Content readable at 200% zoom
- Touch targets are 44x44px minimum