Web accessibility and WCAG compliance guide
Web accessibility is both a legal requirement and a business imperative. According to the WHO, 15% of the world's population—over 1 billion people—experience some form of disability. Beyond compliance, accessible design improves usability for everyone and expands your potential market.
The business case for accessibility
According to WebAIM's Million Analysis, 97% of home pages have detectable WCAG failures. Organizations that prioritize accessibility see improved SEO, broader market reach, and reduced legal risk.
WCAG 2.2 overview
Perceivable
Information must be presentable in ways users can perceive. Text alternatives, captions, adaptable layouts.
Operable
Interface must be operable. Keyboard accessible, enough time, no seizure triggers.
Understandable
Information must be understandable. Readable, predictable, input assistance.
Robust
Content must be robust for diverse user agents. Compatible with assistive technologies.
WCAG Conformance Levels
| Feature | Level A (Min) | Level AA (Standard) | Level AAA (Enhanced) |
|---|---|---|---|
| Text Alternatives | ✓ | ✓ | ✓ |
| Keyboard Accessible | ✓ | ✓ | ✓ |
| Color Contrast | ✗ | ✓ | ✓ |
| Resize Text | ✗ | ✓ | ✓ |
| Audio Descriptions | ✗ | ✗ | ✓ |
| Sign Language | ✗ | ✗ | ✓ |
Target AA: Most organizations target WCAG 2.2 Level AA compliance. Level A is the minimum, AAA is ideal but often impractical for all content. AA is the standard for legal compliance.
Common accessibility issues
Most Common WCAG Failures (%)
Accessible design patterns
Color and Contrast
4.5:1 for normal text, 3:1 for large text. Don't rely on color alone.
Typography
Readable fonts, 16px minimum, 1.5 line height, resizable up to 200%
Focus States
Visible focus indicators for all interactive elements
Keyboard Navigation
All functionality available via keyboard, logical tab order
Forms
Associated labels, error messages, autocomplete attributes
Images
Alt text for informative images, empty alt for decorative
Semantic HTML
Headings (h1-h6)
Use in logical order. One h1 per page, headings create document outline for screen readers.
Landmarks
Use header, main, nav, aside, footer. Enables skip navigation and page structure.
Lists
Use ul, ol, dl for lists. Screen readers announce list length.
Tables
Use for data only, not layout. Include th elements and scope attributes.
Buttons vs Links
Buttons for actions, links for navigation. Critical for screen reader users.
ARIA when needed
When to Use ARIA
First Rule of ARIA: Don't use ARIA if native HTML can achieve the same result. ARIA doesn't add functionality—it only exposes semantics to assistive technologies. Bad ARIA is worse than no ARIA.
Testing for accessibility
Accessibility Testing Methods
| Feature | Automated Tools | Manual Audit | User Testing |
|---|---|---|---|
| Automated Detection | ✓ | ✗ | ✗ |
| Manual Testing Required | ✗ | ✓ | ✗ |
| Screen Reader Testing | ✗ | ✓ | ✓ |
| Keyboard Navigation | ✗ | ✓ | ✓ |
| User Testing | ✗ | ✗ | ✓ |
| Continuous Integration | ✓ | ✗ | ✗ |
Automated Scanning
Axe, Lighthouse, WAVE for quick checks
Keyboard Testing
Navigate entire site using only keyboard
Screen Reader
Test with NVDA, VoiceOver, or JAWS
Zoom Testing
Test at 200% and 400% zoom levels
Color Testing
Check contrast, test in grayscale
User Testing
Test with users who have disabilities
Accessibility testing tools
WCAG Issue Detection Coverage (%)
Implementation roadmap
Audit and Baseline
Comprehensive audit of current state. Document all issues, prioritize by impact and effort.
Quick Wins
Fix high-impact, low-effort issues: alt text, labels, color contrast.
Structural Fixes
Semantic HTML, keyboard navigation, focus management.
Component Library
Build accessible design system components for future work.
Process Integration
Accessibility in design, development, and testing workflows.
FAQ
Q: Do we need to comply with WCAG? A: In many jurisdictions, yes. ADA in the US, European Accessibility Act in EU, and similar laws worldwide increasingly cover digital accessibility. Beyond legal, it's good business.
Q: What level should we target? A: WCAG 2.2 Level AA is the standard target. It's what most laws reference and balances thoroughness with practicality. Level A is bare minimum, AAA is aspirational.
Q: How long does remediation take? A: Depends on current state and site complexity. A typical mid-sized site takes 3-6 months to reach AA compliance, with ongoing maintenance.
Q: Can we make dynamic content accessible? A: Yes, but it requires care. Use ARIA live regions for dynamic updates, manage focus appropriately, and ensure all interactions work via keyboard.
Sources and further reading
Build Accessible Products: Web accessibility requires expertise in standards, testing, and inclusive design. Our team helps organizations build accessible products that serve all users. Contact us to discuss your accessibility needs.
Ready to improve your accessibility? Connect with our accessibility experts to develop a tailored compliance roadmap.
