1 billion people have disabilities. Accessibility lawsuits grew 320% since 2018. 71% of users with disabilities leave inaccessible sites immediately. This is not niche compliance — it is basic web development practice that serves a massive audience, reduces legal risk, and improves usability for everyone.
Custom modals need proper ARIA and focus trapping.Accessibility is not a feature — it is a quality of good software. Every accessibility improvement makes your product better for all users: better keyboard shortcuts, clearer navigation, more readable text, and more predictable interactions. Build for everyone, and everyone benefits.
To achieve WCAG 2.1 AA compliance, start with semantic HTML which provides 80% of accessibility automatically, use ARIA attributes only when no native HTML element exists, ensure full keyboard navigation to every interactive element, maintain 4.5:1 color contrast ratio for normal text and 3:1 for large text, and implement focus management for single-page applications. Automated testing catches 30-50% of issues, so manual testing with screen readers is essential.
Step-by-Step Guide
Use Semantic HTML Foundation
Replace generic divs and spans with correct semantic elements: nav, main, article, section, button, and heading hierarchy (h1-h6). This provides 80% of accessibility automatically.
Implement Keyboard Navigation
Ensure every interactive element is reachable via Tab key. Add visible focus indicators, manage focus order logically, and trap focus in modals and dialogs.
Add ARIA for Custom Components
Apply ARIA roles, states, and properties only to custom widgets where no semantic HTML exists. Use aria-label, aria-describedby, aria-expanded, and live regions for dynamic content.
Ensure Color Contrast Compliance
Verify 4.5:1 contrast ratio for normal text and 3:1 for large text and UI components. Never rely on color alone to convey information — use icons, patterns, or text labels.
Build Accessible Forms
Associate every input with a visible label, provide clear error messages linked to fields with aria-describedby, group related fields with fieldset/legend, and mark required fields programmatically.
Set Up Automated and Manual Testing
Integrate axe-core or Pa11y into CI/CD pipelines for automated checks. Conduct manual testing with keyboard navigation, VoiceOver (macOS), and NVDA (Windows) screen readers.
Key Takeaways
- Semantic HTML provides 80% of accessibility for free — use correct elements first
- ARIA is a last resort — use it only when no semantic HTML element exists
- Keyboard navigation must reach every interactive element
- 4.5:1 contrast ratio for text, 3:1 for large text and UI components
- Automated testing catches 30-50% of issues — manual testing required for the rest
Frequently Asked Questions
Key Terms
- WCAG
- Web Content Accessibility Guidelines — international standard for web accessibility.
- ARIA
- Accessible Rich Internet Applications — attributes providing semantics to assistive technology.
- Screen Reader
- Assistive technology converting screen content to speech or braille.
Is your product facing adoption or retention problems?
Design system debt and inconsistent UX patterns show up in support tickets, conversion drop-off and onboarding abandonment. We are happy to look at what you have and share what we see.
Show Us What You Have BuiltSummary
WCAG 2.1 AA requires perceivable, operable, understandable, and robust web content. Key practices: semantic HTML, proper ARIA for custom components, full keyboard navigation, 4.5:1 contrast, and focus management for SPAs.