Web accessibility ensures that your websites and applications are usable by everyone, including people with disabilities (visual, auditory, motor, cognitive). Beyond ethics, it's a legal obligation in many countries and an SEO factor.
WCAG Standards
The Web Content Accessibility Guidelines (WCAG) define accessibility rules. Current versions: WCAG 2.1 (2018) and WCAG 2.2 (2023).
The 4 POUR Principles
- Perceivable: Information must be presentable in different ways
- Operable: Navigation and interaction possible via keyboard, voice, etc.
- Understandable: Clear content and interface
- Robust: Compatible with assistive technologies
The 3 Conformance Levels
- Level A: Minimum requirements (30 criteria)
- Level AA: Recommended for most sites (50 criteria, includes A)
- Level AAA: Maximum level, difficult to achieve (78 criteria)
Realistic goal: Aim for AA for most web projects.
Essential WCAG Criteria (AA Level)
1. Text Alternatives (1.1.1 - A)
- Alt attribute on all images
- Empty alt (alt="") for decorative images
- Long descriptions for complex graphics
2. Color Contrast (1.4.3 - AA)
- Minimum ratio 4.5:1 for normal text
- Minimum ratio 3:1 for large text (18pt+ or 14pt+ bold)
- Tools: WebAIM Contrast Checker, Stark Figma plugin
3. Keyboard Navigation (2.1.1 - A)
- All functionality accessible via keyboard
- Logical tab order (tabindex if necessary)
- Visible focus on all interactive elements
- No keyboard trap (can exit modals, dropdowns)
4. Accessible Forms (3.3.1, 3.3.2 - A)
- Explicit labels for each input (label + for/id)
- Clear error messages linked to fields (aria-describedby)
- Visible instructions before submission
- Autocomplete attributes to facilitate filling
5. Semantic Structure (1.3.1 - A)
- Consistent H1 > H2 > H3 hierarchy
- Semantic HTML tags (nav, main, aside, article, section)
- Lists (ul, ol) for listed content
- Tables with thead, tbody, th[scope]
6. ARIA Landmarks (4.1.3 - AA)
- role="banner" (header)
- role="navigation" (nav)
- role="main" (main content)
- role="complementary" (sidebar)
- role="contentinfo" (footer)
7. Resizable Text (1.4.4 - AA)
- Text zoomable up to 200% without content loss
- Use rem/em instead of px for font sizes
- Responsive and flexible layout
8. Consistent Focus Order (2.4.3 - A)
- Tab order follows visual order
- Avoid tabindex > 0 (disruptive)
- Modals: trapped focus, return to trigger element on close
ARIA: When and How to Use It
ARIA (Accessible Rich Internet Applications) enriches HTML semantics.
ARIA Golden Rules
- Prefer native HTML: button > div[role="button"]
- Don't overload: Too much ARIA = confusion
- Test with screen readers: NVDA, JAWS, VoiceOver
Useful ARIA
- aria-label: Alternative label (icon without text)
- aria-labelledby: References an element as label
- aria-describedby: Complementary description
- aria-live: Announces dynamic changes (notifications, errors)
- aria-hidden="true": Hides from screen readers
- aria-expanded: Open/closed state (accordion, dropdown)
- aria-current="page": Active page in navigation
Testing Tools
Automated Tests (detect ~30% of issues)
- axe DevTools: Chrome/Firefox extension
- Lighthouse: Integrated in Chrome DevTools
- WAVE: Extension and API
- Pa11y: CLI for CI/CD
Manual Tests (essential)
- Keyboard navigation: Tab, Shift+Tab, Enter, Space, Esc
- Screen readers: NVDA (Windows free), JAWS (Windows paid), VoiceOver (Mac/iOS free)
- Browser zoom: Test at 200%
- Contrast: WebAIM Contrast Checker
- HTML validation: W3C Validator
Legal Obligations
France: RGAA 4
The General Repository for Accessibility Improvement transposes WCAG. Mandatory for:
- Public administrations
- Public companies
- Private companies > €250M revenue
Penalties: Up to €20,000 per non-compliant site.
Europe: European Directive 2016/2102
Transposed in each member country. Public sites must be AA level.
USA: ADA and Section 508
Americans with Disabilities Act: Commercial sites can be sued. Section 508: Mandatory for federal agencies.
Business Benefits
- SEO: Semantic structure improves ranking
- Expanded audience: 15% of world population has disabilities
- Usability: An accessible site is easier for everyone
- Brand image: CSR commitment and inclusivity
- Legal compliance: Avoids fines and lawsuits
💡 Pro Tip
Accessibility is not a luxury, it's a right. Integrate it from design (shift-left) rather than as a late fix. Train your teams, test regularly, and involve users with disabilities. Our team can audit your accessibility and guide you toward WCAG AA compliance.
Quick Accessibility Checklist
Before Launch
Common Accessibility Mistakes
❌ Missing Alt Text
Images without alt attributes are invisible to screen reader users.
<img src="chart.png"> <!-- Bad --><img src="chart.png" alt="Sales growth chart showing 40% increase"> <!-- Good -->❌ Poor Color Contrast
Light gray text on white background (#CCCCCC on #FFFFFF = 1.6:1 ratio).
✅ Use #767676 or darker for AA compliance (4.5:1)
❌ Div Buttons
Using divs as buttons without proper semantics.
<div onClick={handleClick}>Submit</div> <!-- Bad --><button onClick={handleClick}>Submit</button> <!-- Good -->Resources and Further Reading
Official Documentation
- WCAG 2.2 Guidelines: W3C Quick Reference
- MDN Accessibility: Comprehensive guides and tutorials
- WebAIM: Articles, checklists, and tools
Testing Tools
- axe DevTools: Browser extension for accessibility testing
- WAVE: Web Accessibility Evaluation Tool
- Lighthouse: Built into Chrome DevTools
- Color Contrast Analyzer: Desktop app for contrast testing
Screen Readers
- NVDA: Free screen reader for Windows
- VoiceOver: Built into macOS and iOS
- JAWS: Professional screen reader (paid)
Conclusion
Web accessibility is an ongoing commitment, not a one-time fix. By following WCAG guidelines, testing regularly, and prioritizing inclusive design, you create better experiences for all users while meeting legal requirements and improving your SEO. Start with the basics—proper semantics, keyboard navigation, color contrast—and progressively enhance your accessibility practices.
Related Articles
Need an Accessibility Audit?
Our accessibility experts can audit your website for WCAG AA compliance and provide actionable recommendations.
Request an Audit