What is WCAG Compliance?

Quick answer: WCAG (Web Content Accessibility Guidelines) 2.1 Level AA is the international standard for web accessibility.

It ensures people with disabilities can use your website (screen readers, keyboard navigation, color blindness, etc.). Scan tests 150+ WCAG checks via automated tools (pa11y).

Meeting WCAG 2.1 AA helps you comply with ADA (Americans with Disabilities Act) and avoid accessibility lawsuits.

Reading time: 8 minutes

What you’ll learn:

• WCAG levels with legal implications: Level A is minimum (alt text, form labels, no keyboard traps) but NOT sufficient for ADA compliance, Level AA is standard (Level A + 4.5:1 color contrast, hierarchical headings, visible focus indicators) and IS the legal requirement courts reference for ADA, Level AAA is enhanced (7:1 contrast, sign language for videos) but NOT required and rarely achieved
• Common WCAG 2.1 AA issues with fix times: missing alt text on images (10-30 min add alt to all images), color contrast failures like light gray #999 on white = 2.8:1 fails vs dark gray #595959 on white = 7.1:1 passes (1-2 hours adjust CSS colors), form labels missing (30-60 min add elements to all inputs), non-hierarchical headings skipping H2 (15-30 min fix heading order), keyboard navigation issues with elements not accessible via Tab (2-4 hours add keyboard handlers and focus states), ARIA attributes incorrect (1-3 hours fix or use semantic HTML)
• Why WCAG compliance matters beyond morality: legal risk with 4,605 federal ADA website lawsuits filed in 2023 (average $10K-20K settlement, $50K-100K legal fees if you fight, WCAG 2.1 AA compliance reduces lawsuit risk as good-faith defense), market reach with 61 million Americans with disabilities = 15-20% potential customers can’t use inaccessible site (e-commerce with $1M revenue → $150K-200K lost to inaccessibility), SEO benefits (alt text improves Google Image Search 10-15% traffic, semantic headings help crawlers, descriptive links improve anchor text)
• How Scan tests WCAG with limitations: automated pa11y checks catch about 70% of WCAG issues (alt text existence, color contrast ratios, form labels, heading hierarchy, ARIA attributes, keyboard accessibility patterns), but CAN’T catch alt text quality (both “image.jpg” and “Blue ceramic mug” have alt text but one is useless), logical tab order, content clarity for cognitive disabilities, video caption accuracy, so Scan for automated 70% then manual review for remaining 30% for full compliance
• Accessibility roadmap with timelines: Step 1 run Scan baseline audit showing 62 issues (estimated fix time: 0-20 issues = 2-4 hours, 20-50 issues = 1-2 days, 50-100 = 3-5 days, 100+ = 1-2 weeks), Step 2 fix critical high-priority issues first (missing alt text, form labels, color contrast are quick fixes with high lawsuit risk + conversion impact), Step 3 re-test showing 62 → 8 issues (mostly compliant, safe from most lawsuits), Step 4 maintain quarterly (catch new issues from content updates, test before launches, train content team)

Target: WCAG 2.1 AA compliance (minimum for legal safety)

---

WCAG Levels Explained

Level A (Minimum)

Requirements: Most basic accessibility features

Examples:

• All images have alt text
• All form inputs have labels
• No keyboard traps
• Content can be accessed with keyboard only

Legal standing: Level A alone does NOT satisfy ADA compliance

---

Level AA (Standard)

Requirements: Level A + additional accessibility features

Examples:

• Color contrast ratios meet 4.5:1 minimum
• Text can be resized to 200% without breaking layout
• Headings are hierarchical (H1 → H2 → H3, not H1 → H3)
• Focus indicators visible on all interactive elements

Legal standing: WCAG 2.1 AA is the standard for ADA compliance (most courts require this level)

This is what Scan tests for.

---

Level AAA (Enhanced)

Requirements: Level AA + highest accessibility standards

Examples:

• Color contrast ratios meet 7:1 (stricter than AA)
• Sign language interpretation for videos
• Extended audio descriptions

Legal standing: AAA is NOT required for ADA compliance (nice-to-have, not mandatory)

Rarely achieved: AAA is very strict, most organizations target AA only

---

Common WCAG 2.1 AA Issues

1. Missing Alt Text on Images

What it is: Images without alt attribute

Why it matters: Screen readers can’t describe images to blind users

Example fail:

<img src="product.jpg">

Example pass:

<img src="product.jpg" alt="Blue ceramic coffee mug with company logo">

How Scan detects: Checks all <img> tags for alt attribute

Fix time: 10-30 minutes (add alt text to all images)

---

2. Color Contrast Failures

What it is: Text too light against background (hard to read)

Why it matters: People with low vision or color blindness can’t read content

WCAG requirement:

• Normal text: 4.5:1 contrast ratio minimum
• Large text (18pt+ or 14pt+ bold): 3:1 contrast ratio minimum

Example fail:

• Light gray text (#999) on white background (#FFF) = 2.8:1 ratio

Example pass:

• Dark gray text (#595959) on white background (#FFF) = 7.1:1 ratio

How Scan detects: Analyzes all text/background color combinations

Fix time: 1-2 hours (adjust CSS colors to meet ratios)

---

3. Form Labels Missing

What it is: Form inputs without associated <label> elements

Why it matters: Screen readers can’t tell users what each field is for

Example fail:

<input type="text" name="email">

Example pass:

<label for="email">Email Address</label>
<input type="text" id="email" name="email">

How Scan detects: Checks all <input>, <select>, <textarea> for labels

Fix time: 30-60 minutes (add labels to all form fields)

---

4. Non-Hierarchical Headings

What it is: Skipping heading levels (H1 → H3, missing H2)

Why it matters: Screen readers use headings for navigation

Example fail:

<h1>Main Heading</h1>
<h3>Subheading</h3> <!-- Skipped H2 -->

Example pass:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subheading</h3>

How Scan detects: Analyzes heading hierarchy

Fix time: 15-30 minutes (fix heading order in HTML/CSS)

---

5. Keyboard Navigation Issues

What it is: Elements that can’t be accessed with keyboard (Tab key)

Why it matters: Users who can’t use a mouse need keyboard access

Example fail:

• Dropdown menus that only work on hover (not keyboard-accessible)
• Buttons without focus states
• Links that can’t be tabbed to

Example pass:

• All interactive elements accessible via Tab key
• Visible focus indicators (outline/highlight on focus)
• Skip navigation links for screen readers

How Scan detects: Tests keyboard accessibility patterns

Fix time: 2-4 hours (add keyboard event handlers, focus states)

---

6. ARIA Attributes Incorrect

What it is: ARIA (Accessible Rich Internet Applications) roles/attributes used incorrectly

Why it matters: ARIA tells screen readers how to interpret complex widgets

Example fail:

<div role="button">Click me</div> <!-- Should be <button> or needs aria-label -->

Example pass:

<button aria-label="Submit form">Submit</button>

How Scan detects: Validates ARIA usage against spec

Fix time: 1-3 hours (fix ARIA attributes, use semantic HTML)

---

Why WCAG Compliance Matters

1. Legal Risk (ADA Lawsuits)

ADA applies to websites (Title III):

• Courts have ruled websites are “places of public accommodation”
• Businesses can be sued for inaccessible websites
• WCAG 2.1 AA is the standard courts reference

Lawsuit statistics:

• 2023: 4,605 federal ADA website lawsuits filed
• Average settlement: $10,000-20,000
• Legal fees: $50,000-100,000 (if you fight it)

Who gets sued:

• E-commerce sites (can’t purchase if not accessible)
• Healthcare providers
• Financial services
• Government sites
• Any business with website accepting transactions

Defense: Showing WCAG 2.1 AA compliance reduces lawsuit risk (demonstrates good-faith effort)

---

2. Market Reach (15% of Population)

Disability statistics (U.S.):

• 61 million Americans have disabilities (26% of adults)
• 8.1 million vision impairment (3.3%)
• 5.9 million cognitive disabilities (2.3%)
• Color blindness: 8% of men, 0.5% of women

Revenue impact:

• Inaccessible website = 15-20% of potential customers can’t use it
• Example: E-commerce site with $1M revenue → $150K-200K lost to inaccessibility

---

3. SEO Benefits

WCAG compliance improves SEO:

• Alt text on images → Google Image Search
• Semantic HTML (proper headings) → better content structure for crawlers
• Descriptive link text → better anchor text for SEO
• Keyboard navigation → often correlates with better mobile UX

Example: Adding alt text to 100 images → improves image search visibility → 10-15% traffic increase from image search

---

4. Better User Experience (Everyone)

WCAG benefits ALL users:

• High color contrast → easier to read in sunlight (mobile users)
• Keyboard navigation → power users prefer keyboard shortcuts
• Clear labels → reduces form abandonment (everyone benefits from clarity)
• Semantic headings → easier to scan content (everyone, not just screen readers)

Example: Fixing color contrast improves readability for older users (aging eyes), people in bright environments, and users with temporary vision issues.

---

How Scan Tests WCAG Compliance

Automated Checks (150+)

Scan uses pa11y (industry-standard accessibility testing tool) to run 150+ automated checks:

What’s tested:

• ✓ Alt text on all images
• ✓ Color contrast ratios
• ✓ Form labels
• ✓ Heading hierarchy
• ✓ ARIA attributes
• ✓ Keyboard accessibility
• ✓ Focus indicators
• ✓ Link text descriptiveness
• ✓ Language declaration
• ✓ Document title

Per-page breakdown (Scan Pro):

• See which specific pages have issues
• Prioritize fixes by page importance

---

What Automated Testing CAN’T Catch

Requires manual review:

• Alt text quality (is “image.jpg” vs “Blue ceramic mug” - both have alt text, but one is useless)
• Logical tab order (are interactive elements in correct tab sequence?)
• Content clarity (is language simple enough for cognitive disabilities?)
• Video captions accuracy (automated test sees captions exist, doesn’t verify accuracy)

Scan catches about 70% of WCAG issues (automated testing industry standard)

For full compliance: Use Scan for automated checks, then manual review for remaining 30%

---

WCAG Compliance Levels by Page

Example Scan Results

Your site: 30 pages tested (Scan Essential)

Page	WCAG Issues	Status
Homepage	3 issues	Needs fixes
About	0 issues	Compliant
Services	12 issues	Major issues
Contact	2 issues	Needs fixes
Blog (15 posts)	45 issues total	Major issues

Total: 62 accessibility issues across 30 pages

Priority: Fix Services page (12 issues) and Blog (45 issues = 3 per post average)

---

Common Patterns

Pattern 1: Blog images missing alt text

• 15 blog posts × 3 images each = 45 missing alt tags
• Fix: Bulk add alt text (WordPress bulk edit, CMS tools)
• Time: 2-3 hours

Pattern 2: Color contrast in navigation

• Light gray text on white header (2.8:1 ratio, fails 4.5:1 requirement)
• Fix: Darken navigation text color
• Time: 10 minutes (CSS change)

Pattern 3: Form labels missing

• Contact form with 5 inputs, none have labels
• Fix: Add <label> elements to all inputs
• Time: 15 minutes

---

WCAG Compliance Roadmap

Step 1: Run Scan (Baseline Audit)

Identify issues:

• Total issues count
• Issue types (alt text, color contrast, forms, etc.)
• Pages most affected

Estimated fix time based on Scan results:

• 0-20 issues: 2-4 hours
• 20-50 issues: 1-2 days
• 50-100 issues: 3-5 days
• 100+ issues: 1-2 weeks

---

Step 2: Fix Critical Issues First

High priority (legal risk + easy fixes):

1. Missing alt text (quick to fix, high lawsuit risk)
2. Form labels (quick to fix, affects conversions)
3. Color contrast (CSS change, high impact)

Medium priority: 4. Heading hierarchy (may require HTML restructure) 5. ARIA attributes (requires understanding spec) 6. Keyboard navigation (may need JavaScript changes)

---

Step 3: Re-Test After Fixes

Run Scan again to verify fixes worked:

• Issues reduced from 62 → 8
• Remaining issues are edge cases (manual review needed)

Example progress:

• Before: 62 issues (non-compliant)
• After: 8 issues (mostly compliant, safe from most lawsuits)

---

Step 4: Maintain Compliance

Ongoing testing:

• Run Scan quarterly (catch new issues from content updates)
• Test before major launches (new features, design changes)
• Train content team (add alt text to new images, maintain hierarchy)

---

WCAG 2.1 vs 2.2 (and 3.0)

WCAG 2.1 (Current Standard)

Released: 2018

Scan tests for: WCAG 2.1 Level AA

Legal standard: Most courts reference WCAG 2.1 AA for ADA compliance

---

WCAG 2.2 (Recent Update)

Released: 2023

New requirements:

• Focus appearance (more visible focus indicators)
• Dragging movements (alternatives to drag-and-drop)
• Target size (interactive elements at least 24×24 CSS pixels)

Adoption: Slowly being adopted, not yet legal standard

Scan: Will add WCAG 2.2 checks as standard evolves

---

WCAG 3.0 (Future)

Status: Draft (not finalized)

Changes: Major restructure, new scoring system

Timeline: 2026+ (estimated)

Current recommendation: Focus on WCAG 2.1 AA compliance now (2.2 and 3.0 will build on 2.1 foundation)

---

Frequently Asked Questions

Is WCAG compliance legally required?

Not explicitly, but ADA Title III is enforced via WCAG 2.1 AA standard.

Courts have ruled:

• Websites are “places of public accommodation” under ADA
• WCAG 2.1 AA is the standard referenced in settlements
• Showing compliance reduces lawsuit risk significantly

Recommendation: Treat WCAG 2.1 AA as legal requirement (safest approach).

Can I get sued if I’m WCAG compliant?

Technically yes, but far less likely.

Reality:

• Most lawsuits target obvious non-compliance (missing alt text, unusable forms)
• Showing good-faith effort (WCAG 2.1 AA compliance) is strong defense
• Many plaintiffs’ lawyers avoid businesses with compliant sites (harder to win)

Best practice: Maintain WCAG 2.1 AA compliance, document testing, keep audit reports (proof of good-faith effort).

How long does it take to fix WCAG issues?

Depends on issue count:

• 0-20 issues: 2-4 hours (quick fixes like alt text, color contrast)
• 20-50 issues: 1-2 days (includes forms, headings)
• 50-100 issues: 3-5 days (major fixes, possibly HTML restructure)
• 100+ issues: 1-2 weeks (comprehensive fixes, may need developer)

Example: 62 issues → fixed in 3 days (2 days dev time, 1 day testing).

Does Scan catch 100% of WCAG issues?

No. Automated testing catches about 70% of WCAG issues.

Scan catches:

• Missing alt text ✓
• Color contrast failures ✓
• Form labels ✓
• Heading hierarchy ✓
• ARIA errors ✓

Scan can’t catch (requires manual review):

• Alt text quality (is description meaningful?)
• Tab order logic (are elements in correct sequence?)
• Content clarity (is language simple enough?)
• Video caption accuracy

For full compliance: Scan (automated) + manual review (remaining 30%)

How much does WCAG compliance cost?

DIY approach (using Scan):

• Scan Essential: $25 (up to 30 pages)
• Scan Pro: $50 (up to 100 pages)
• Developer time: 1-2 weeks (depends on issue count)
• Total: $50 + developer cost

Consultant approach:

• Manual WCAG audit: $2,000-5,000
• Remediation: $5,000-15,000
• Total: $7,000-20,000

Scan advantage: Catch 70% of issues for $25 or $50, then fix internally. Use consultant only for edge cases.

Can I just add an accessibility widget (overlay)?

No. Accessibility overlays (UserWay, AccessiBe, etc.) are NOT sufficient for compliance.

Why they fail:

• Don’t fix underlying issues (just band-aid)
• Can create NEW accessibility problems
• Courts have rejected overlays as compliance solution
• Disability advocacy groups actively oppose them

Recommendation: Fix actual HTML/CSS issues (what Scan identifies), don’t rely on overlays.

---

Want to check your WCAG compliance? Run Scan Essential ($25) for up to 30 pages, Scan Pro ($50) for up to 100 pages with page-level breakdown. 150+ automated WCAG 2.1 AA checks. Delivered in about 15-30 minutes.