Your website is rejecting customers. Not intentionally. But if visitors are blind, deaf, or have mobility impairments, they probably can't use your site. That's a problem—legally, morally, and financially.
In 2025, there were 2,400+ ADA website accessibility lawsuits filed in federal court. Settlements range from $5K to $100K+. More important than the legal risk: you're leaving money on the table. 15% of the population has disabilities. If your site excludes them, you're excluding customers.
This guide explains what accessibility means, why it matters, what compliance looks like, and how to implement it without breaking the budget.
TL;DR Summary
Website accessibility means everyone can use your site, regardless of ability—including people who are blind (using screen readers), deaf (needing captions), colorblind, or have motor impairments. WCAG 2.1 is the international standard; Level AA compliance is the baseline target. ADA (Americans with Disabilities Act) requires US websites to be accessible; avoiding compliance increases legal risk and limits your market. Business benefits: 15% larger addressable market, better SEO, better UX for everyone (accessible design helps users on slow connections, mobile, etc.), reduced legal risk. Implementation cost: $5K–$15K for audit + fixes on existing site. Timeline: 4–8 weeks. Building accessibility into new sites from the start costs only 10–15% more but saves 3–5x the remediation cost later. Start with WCAG 2.1 Level AA targets: alt text on images, keyboard navigation, color contrast, forms with labels, video captions. Skip overlay tools (they don't work); fix the actual code.
Table of Contents
- What Is Website Accessibility?
- Legal Landscape: ADA & WCAG
- Business Case for Accessibility
- WCAG 2.1 Standards Explained
- Common Accessibility Issues
- Accessibility Audit & Fix Process
- Building Accessible Sites From Scratch
- Accessibility Myths & Truth
- FAQ
- Conclusion & Next Steps
What Is Website Accessibility?
Accessibility means everyone can use your website, regardless of:
- Vision: Blind users (using screen readers), low vision (magnified text), colorblind (can't distinguish red/green)
- Hearing: Deaf and hard of hearing users (need captions, transcripts)
- Motor: Users with limited mobility (can't use mouse, use keyboard or voice commands instead)
- Cognitive: Users with dyslexia, ADHD, etc. (need clear, simple language; avoid flashing content)
Example: A blind user visits your website. Their screen reader (software that reads content aloud) encounters:
<!-- Bad (inaccessible) -->
<img src="product.jpg"> <!-- Screen reader says nothing -->
<!-- Good (accessible) -->
<img src="product.jpg" alt="Blue running shoes, size 10, $89"> <!-- Screen reader describes image -->
Same site. One user knows what the image is; the other has no idea.
Accessibility isn't a feature. It's a requirement. Like HTTPS or mobile responsiveness in 2026.
Legal Landscape: ADA & WCAG
ADA (Americans with Disabilities Act)
The ADA, passed in 1990, requires businesses to provide "equal access to goods and services." The internet is now a public accommodation. Your website must be accessible to people with disabilities.
ADA Enforcement:
- The US Department of Justice has the authority to sue
- Private citizens (or lawyers) can file lawsuits under ADA Title III
- In 2024–2025, lawsuits averaged $15K–$50K settlements, some reaching $100K+
Who's sued?
- Retailers (Beyoncé's website, Target, Domino's Pizza)
- Nonprofits (American Red Cross)
- Software companies
- Professional services (law firms, medical practices)
Reality: If you operate in the US and don't provide reasonable accessibility, you're exposed to legal action.
WCAG 2.1 (Web Content Accessibility Guidelines)
WCAG is the international standard for web accessibility, published by the W3C. It's not law, but courts reference it as the standard for "reasonable accessibility."
WCAG has 3 levels:
| Level | Standard | Effort | Target |
|---|---|---|---|
| A | Minimum accessibility | Low | Bare minimum; many issues remain |
| AA | Widely adopted standard | Medium | Industry baseline. Aim for this. |
| AAA | Enhanced accessibility | High | Overkill for most sites; for specialized applications |
WCAG 2.1 Level AA covers 4 pillars:
Perceivable: Users can see or hear content
- Alt text on images
- Captions on video
- Color contrast (4.5:1 minimum)
Operable: Users can navigate and use your site
- Keyboard navigation (no mouse required)
- Forms with visible labels
- No content that flashes >3x/second
Understandable: Content is clear
- Readable text (avoid jargon)
- Consistent navigation
- Error messages that explain how to fix
Robust: Works with assistive technology
- Proper HTML structure
- ARIA labels where needed
- Works with screen readers and voice commands
Business Case for Accessibility
1. Larger Market: 15% of Population
1 in 4 adults in the US have some form of disability. That's 61M people. If your site excludes them, you're excluding 25% of potential customers and employees.
2. Better SEO
Accessibility overlaps with SEO:
- Alt text helps image SEO (Google Images)
- Captions help video SEO (YouTube, Google)
- Good HTML structure helps crawlability
- Fast load (accessibility practice) improves rankings
Result: Accessible sites typically rank better.
3. Better UX for Everyone
Accessibility features help people in unexpected situations:
- High contrast helps users on bright screens or with glare
- Keyboard navigation helps users with broken trackpads
- Clear language helps non-native speakers
- Captions help users in loud environments (coffee shops, gyms)
4. Reduced Legal Risk
Accessibility compliance reduces the chance of lawsuits. You can't eliminate risk entirely, but documented effort (audit, fixes, ongoing maintenance) is a strong defense.
5. Employee Accessibility
Accessible design helps your team:
- Employees with disabilities can work remotely
- Better company culture (you signal inclusion)
- Diverse teams build better products
6. Corporate Responsibility
Increasingly, customers and employees expect companies to be inclusive. Accessibility is table stakes for conscious brands.
WCAG 2.1 Standards Explained
Perceivable (Making Content Visible/Audible)
Alternative Text (Alt Text) Every image needs descriptive alt text. Screen readers read it aloud.
<!-- Bad -->
<img src="hero.jpg">
<!-- Good -->
<img src="hero.jpg" alt="Sunlit beach with palm trees and calm blue water">
Color Contrast Text and background must have sufficient contrast. Minimum 4.5:1 for regular text, 3:1 for large text.
<!-- Bad (low contrast) -->
<p style="color: #888; background: white;">Gray text on white background</p>
<!-- Good (high contrast) -->
<p style="color: #333; background: white;">Dark text on white background</p>
Captions & Transcripts Video needs captions (for deaf users) and transcripts (for search engines).
<!-- Provide both -->
<video controls>
<source src="product-demo.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>
<p>Transcript: <a href="transcript.pdf">Download full transcript</a></p>
Operable (Navigation & Interaction)
Keyboard Navigation Every feature reachable by Tab key. No mouse required.
<!-- Good: Form is navigable by Tab, Enter submits -->
<form>
<label for="email">Email:</label>
<input id="email" type="email">
<label for="message">Message:</label>
<textarea id="message"></textarea>
<button type="submit">Send</button>
</form>
Focus Indicators When you Tab to an element, there's a visible outline showing where you are.
/* Good: Clear focus state */
button:focus {
outline: 2px solid blue;
}
No Content Flashing >3x/Second Flashing content can trigger seizures. Avoid GIFs and animations that flash more than 3x per second.
Understandable (Clear Language & Consistency)
Readable Language Avoid jargon. Use short sentences. Write for your actual audience.
<!-- Bad (jargon-heavy) -->
<p>Leverage our synergistic paradigm for optimal ROI optimization.</p>
<!-- Good (clear) -->
<p>Use our platform to increase sales by 30% in 3 months.</p>
Consistent Navigation Navigation is in the same place on every page. Users know where to find it.
Labeled Forms Every form field has a visible label. Screen readers read labels aloud.
<!-- Bad -->
<input type="email">
<!-- Good -->
<label for="email">Email Address:</label>
<input id="email" type="email">
Robust (Works with Assistive Tech)
Valid HTML Use proper semantic HTML. This helps screen readers understand structure.
<!-- Bad (divitis) -->
<div onclick="navigate('/')">Home</div>
<!-- Good (semantic) -->
<a href="/">Home</a>
<!-- Good (button) -->
<button onclick="toggleMenu()">Menu</button>
ARIA Labels (when semantic HTML isn't enough) Use ARIA (Accessible Rich Internet Applications) for dynamic content.
<!-- Good: Icon button with ARIA label -->
<button aria-label="Close menu">
<span aria-hidden="true">×</span>
</button>
Common Accessibility Issues
Issue 1: Missing Alt Text (Images)
Impact: Blind users have no idea what images show.
Fix: Write descriptive alt text. Not "image.jpg." Describe the content.
| Bad Alt Text | Good Alt Text |
|---|---|
| "photo" | "Team of 5 engineers at desks with laptops" |
| "icon" | "Green checkmark icon indicating success" |
| "diagram" | "Flowchart showing customer journey from awareness to purchase" |
Issue 2: Poor Color Contrast
Impact: Users with low vision (or on bright screens) can't read text.
Fix: Use contrast checker (WebAIM). Aim for 4.5:1 for regular text.
/* Bad (2:1 contrast) */
color: #999; /* Dark gray */
background: white;
/* Good (7:1 contrast) */
color: #333; /* Very dark gray */
background: white;
Issue 3: No Keyboard Navigation
Impact: Users who can't use a mouse are stuck.
Fix: Test navigation with Tab key. All interactive elements should be reachable. Use visible focus indicators.
/* Add visible focus for interactive elements */
a:focus, button:focus, input:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
Issue 4: Unlabeled Form Fields
Impact: Screen reader users don't know what each field is for.
Fix: Every input needs a <label> with matching for attribute.
<!-- Bad -->
<input type="email">
<input type="password">
<!-- Good -->
<label for="email">Email:</label>
<input id="email" type="email">
<label for="password">Password:</label>
<input id="password" type="password">
Issue 5: No Video Captions
Impact: Deaf users miss video content.
Fix: Add captions to all video. Use YouTube's auto-caption tool as a start, then edit for accuracy.
Issue 6: Inaccessible PDFs
Impact: PDFs that are scanned images (not searchable) can't be read by screen readers.
Fix: Use OCR (optical character recognition) to convert scanned PDFs to text-based. Or convert to HTML.
Issue 7: Flash/Auto-Playing Video
Impact: Flash is inaccessible and slow. Auto-playing video startles users.
Fix: Avoid Flash entirely (it's deprecated). Use HTML5 <video>. Don't auto-play; let users start video.
Accessibility Audit & Fix Process
Step 1: Automated Audit (1 day)
Use free tools to find obvious issues:
- WAVE (WebAIM): Browser extension, highlights accessibility issues
- Axe DevTools: Free browser extension, detailed reports
- Google Lighthouse: Built into Chrome DevTools, includes accessibility score
- WebAIM Contrast Checker: Test color contrast
Typical findings:
- Missing alt text (30–50% of images)
- Poor color contrast (20–40% of pages)
- Missing form labels (15–30%)
- Missing ARIA labels (on custom buttons, icons)
Step 2: Manual Testing (1–2 weeks)
Automated tools find 60–70% of issues. Manual testing catches the rest:
- Screen reader testing: Use NVDA (free) or JAWS to navigate site. Does it make sense?
- Keyboard testing: Tab through entire site. Can you reach every interactive element? Is focus visible?
- Color-blindness simulation: Use Color Blindness Simulator extension to see site through colorblind eyes
- Zoom testing: Set zoom to 200%. Can you still read and navigate?
- Mobile testing: Test on real mobile devices (not just desktop browser)
Step 3: User Testing (Optional, Recommended)
Test with actual users with disabilities. 3–5 people testing reveals usability issues that automated tools miss.
Cost: $1K–$3K (recruit 3 people for 1-hour sessions) Value: Prevents expensive rework later
Step 4: Remediation (4–8 weeks)
Based on audit findings, fix issues:
| Fix | Effort | Cost |
|---|---|---|
| Add alt text | 1–2 weeks | $1K–$3K |
| Fix color contrast | 1 week | $500–$1K |
| Fix keyboard navigation | 2–3 weeks | $2K–$4K |
| Add form labels | 1 week | $500–$1K |
| Add captions to videos | 1–2 weeks | $1K–$3K |
| Add ARIA labels | 1–2 weeks | $1K–$2K |
Total remediation: $5K–$15K for average site (50–100 pages)
Step 5: Ongoing Maintenance
After fixes, maintain accessibility:
- Code review: Check new code for accessibility during development
- Testing in CI/CD: Automated tests catch regressions
- Quarterly audits: Rerun automated tests to catch new issues
- User feedback: Monitor for accessibility complaints
Annual maintenance cost: 5–10% of remediation cost
Building Accessible Sites From Scratch
If you're building a new site, accessibility costs only 10–15% more but saves 3–5x in remediation later.
Accessibility-First Process
- Use semantic HTML:
<button>,<nav>,<main>,<article>instead of generic<div> - Design with accessibility in mind: High contrast from the start. Large font sizes. Clear navigation.
- Test with keyboard: Before shipping, Tab through every page.
- Test with screen reader: NVDA (Windows, free) or built-in VoiceOver (Mac).
- Write alt text as you create images: Not after. Makes it second nature.
- Automate testing: Use pa11y or Axe in your CI/CD pipeline to catch issues before they ship.
Accessibility in Design Systems
If you're building a design system (component library), make accessibility foundational:
- Buttons: Must be keyboard-navigable, have focus indicator
- Forms: Labels mandatory, errors clear
- Cards: Semantic heading hierarchy, descriptive links
- Modals: Trap focus inside, restore focus when closed
- Icons: Hidden from screen readers (aria-hidden) or labeled (aria-label)
A good design system prevents 80% of accessibility issues. Bad design systems force developers to patch accessibility issue-by-issue.
Accessibility Myths & Truth
Myth 1: "Accessibility Makes Sites Ugly"
Truth: Good accessibility = good design. High contrast, clear labels, simple navigation benefit everyone. It's not a trade-off; it's better UX.
Myth 2: "We Can Use an Accessibility Overlay"
Truth: Overlays (tools that claim to "fix" accessibility for you) don't work. They improve some metrics but don't fix code. Courts have rejected them in ADA cases. Fix the actual code instead.
Myth 3: "Accessibility Is Only for Legal Compliance"
Truth: Legal compliance is the minimum. The real value is market expansion (15% larger audience), better SEO, and better UX for everyone.
Myth 4: "Blind Users Don't Visit Websites"
Truth: Blind users visit websites constantly. They use screen readers (NVDA, JAWS, VoiceOver). They're a real, growing market. In the US, 7M people are blind or visually impaired.
Myth 5: "Accessibility Requires Perfect Code"
Truth: Perfect accessibility is impossible. Aim for WCAG 2.1 Level AA (80–90% of best practices). Some advanced features might only reach Level A. That's okay. Progress > perfection.
FAQ
Q: Is accessibility a legal requirement in the US?
A: Yes, under the ADA (Americans with Disabilities Act). Your website must be accessible to people with disabilities. Courts have interpreted this to mean WCAG 2.1 Level AA compliance. Lawsuits are ongoing (2,400+ in 2024–2025), and settlements range from $5K to $100K+. Even if you haven't been sued, the legal exposure is real.
Q: What's the difference between ADA and WCAG?
A: ADA is the law (Americans with Disabilities Act, US only). WCAG is the standard that defines what "accessible" means. Courts use WCAG 2.1 Level AA as the baseline for what's "reasonable" accessibility under the ADA.
Q: Do we need to be 100% compliant with WCAG AAA?
A: No. Level AA is the industry standard and sufficient for ADA compliance. Level AAA is for specialized applications (government sites, education platforms). Unless you have a reason, target AA and maintain it.
Q: How much does accessibility cost?
A: Audit + fixes on existing site: $5K–$15K, 4–8 weeks. Building accessibility into new sites from the start: 10–15% development cost premium (~$5K on a $50K project). Long-term: annual maintenance 5–10% of remediation cost. ROI: expanded market (15% of population), reduced legal risk, better SEO.
Q: What's the most important accessibility fix?
A: Alt text. Missing alt text is the most common issue (30–50% of sites) and affects the largest disabled population (blind users). Add alt text and you've fixed 1/3 of accessibility problems.
Q: Do we need to caption every single video?
A: Ideally yes. Practically: caption videos on main pages (homepage, landing pages) and educational content. Internal videos can be lower priority. But the more you caption, the better the experience and SEO (captions are indexed).
Conclusion & Next Steps
Key Takeaways:
- Website accessibility means everyone (including people with disabilities) can use your site.
- WCAG 2.1 Level AA is the industry standard and baseline for ADA compliance.
- Legal risk is real: 2,400+ ADA lawsuits filed in 2024–2025, settlements $5K–$100K+.
- Business benefits: 15% larger market, better SEO, better UX for everyone, reduced legal risk.
- Audit existing site: $5K–$15K, 4–8 weeks. Build accessibility into new sites: 10–15% development cost premium.
- Don't use accessibility overlays. Fix the actual code.
- Start with alt text, color contrast, keyboard navigation, and form labels. These fix 70% of issues.
Next Step: Get a free accessibility audit.
Schedule a 30-minute accessibility audit. I'll analyze your site, identify accessibility issues, estimate remediation cost, and explain your legal exposure. No sales pitch—just honest feedback on compliance and market opportunity. I'll show you the specific WCAG 2.1 issues and prioritize fixes by impact.
Author Bio
I'm Adriano Junior, a senior full-stack engineer with 16 years of experience and 250+ projects. I've built accessible websites from scratch and audited/remediated dozens of existing sites for WCAG 2.1 Level AA compliance. I believe accessibility isn't a feature or a legal checkbox—it's good business and good design. I help companies understand their legal risk, expand their addressable market, and improve UX for everyone. Schedule a call to discuss accessibility for your site.