Accessibility
Build an inclusive store that works for everyone. Learn about Brave's accessibility features and how to optimize for all users.
Overview
Accessibility isn't just good ethics—it's good business. About 15% of the world's population has some form of disability. An accessible store reaches more customers and often ranks better in search engines.
Keyboard Navigation
Screen Readers
Visual Accessibility
Motion Preferences
Built-in Accessibility Features
Brave includes these accessibility features by default:
Semantic HTML
- Proper heading hierarchy (H1 → H2 → H3)
- Landmark regions (
<header>,<main>,<footer>,<nav>) - Meaningful link text
- Button elements for interactive actions
Keyboard Support
- All interactive elements are keyboard accessible
- Focus states are visible
- Tab order follows logical reading order
- Escape key closes modals and dropdowns
Screen Reader Support
- Images support alt text
- Form labels are properly associated
- ARIA labels on icon buttons
- Live regions for dynamic updates
Motion & Animation
- Animations respect
prefers-reduced-motion - Users who prefer reduced motion see static alternatives
- No auto-playing video audio
Accessibility Checklist
Images
Add Alt Text to All Images
Every image should have descriptive alt text. Product images especially need alt text for screen reader users.
Decorative Images
For purely decorative images, use empty alt text (alt="") so screen readers skip them.
Complex Images
For images with important information (charts, infographics), provide detailed descriptions.
Color & Contrast
Check Color Contrast
Text must have at least 4.5:1 contrast ratio against backgrounds (3:1 for large text).
Don't Rely on Color Alone
Don't use color as the only indicator (e.g., "Red items are on sale"). Add text or icons.
Test Color Schemes
Use a contrast checker for all your color scheme combinations.
Links & Buttons
Descriptive Link Text
Use descriptive links: "View our shipping policy" not "Click here".
Button vs Link
Use buttons for actions (add to cart) and links for navigation (go to page).
Focus States
Ensure focus outlines are visible. Don't remove default focus styles without providing alternatives.
Forms
Label All Inputs
Every form field must have a visible label. Placeholders alone are not sufficient.
Error Messages
Error messages should be clear and describe how to fix the issue.
Required Fields
Clearly indicate required fields (not just with color).
Best Practices
Typography
- Minimum text size: 16px for body text
- Line height: 1.5 or higher for readability
- Font choice: Use readable fonts, avoid decorative fonts for body text
- Text spacing: Don't justify text; use left alignment
Navigation
- Keep menus consistent across pages
- Provide skip links for keyboard users
- Ensure dropdown menus are keyboard accessible
- Limit menu depth (3 levels max)
Multimedia
- Videos should have captions
- Auto-playing media should be muted by default
- Provide transcripts for audio content
- Don't rely on video for essential information
Testing Accessibility
Tools
Manual Testing
Keyboard Navigation
Navigate your entire store using only Tab, Enter, Space, and Arrow keys.
Screen Reader Test
Listen to your store with a screen reader. Do images have alt text? Are forms labeled?
Zoom Test
Zoom to 200% and ensure the layout still works and text is readable.
Color Test
Use a colorblindness simulator to check if your design works without full color perception.
Common Accessibility Issues
Issue: Low Color Contrast
Problem: Text is hard to read against backgrounds.
Solution:
- Use a contrast checker for all color combinations
- Aim for 4.5:1 ratio minimum
- Increase contrast in your color schemes
Issue: Missing Alt Text
Problem: Screen reader users can't understand images.
Solution:
- Go to each product and add alt text
- Add alt text to hero and marketing images
- Use descriptive, concise alt text
Issue: Focus Not Visible
Problem: Keyboard users can't see where they are on the page.
Solution:
- Don't remove default focus styles
- If customizing focus, ensure outlines are visible
- Test by tabbing through your site
Issue: Forms Without Labels
Problem: Screen readers can't identify form fields.
Solution:
- Add visible labels above form fields
- Don't rely solely on placeholders
- Associate labels with inputs properly
Legal Considerations
Many countries have accessibility laws:
- United States: ADA (Americans with Disabilities Act)
- Canada: AODA (Accessibility for Ontarians with Disabilities Act)
- European Union: European Accessibility Act
- United Kingdom: Equality Act 2010
While laws vary, WCAG 2.1 Level AA is generally the accepted standard for web accessibility.
This is not legal advice. Consult with an accessibility specialist or legal professional for compliance guidance specific to your jurisdiction.
Resources
Learning More
- WebAIM — Comprehensive accessibility resource
- A11y Project — Accessibility checklist and patterns
- WCAG Guidelines — Official accessibility standards