WCAG 2.1 Accessibility Compliance

BugBrain automatically tests your application against Web Content Accessibility Guidelines (WCAG) 2.1 Level AA — the industry standard for digital accessibility.

What BugBrain Tests

Perceivable (Information is accessible)

Color Contrast — Text must have sufficient contrast ratio (4.5:1 for normal text)

Detects low-contrast text against backgrounds
Checks foreground/background color combinations
Severity: Serious (users with low vision cannot read)

Alternative Text (Alt Text) — Images must have descriptive alt text

Flags missing alt attributes on images
Detects empty alt="" (only valid for decorative images)
Checks alt text quality and length
Severity: Critical (screen reader users miss information)

Captions & Transcripts — Video and audio content must have captions

Detects video without captions
Flags audio without transcripts
Severity: Critical (deaf/hard of hearing users cannot access)

Text Resizing — Content must remain usable at 200% zoom

Tests text and interface elements at 2x scale
Detects layout breakage or overflow
Severity: Moderate

Operable (Users can navigate and interact)

Keyboard Navigation — All functionality must be accessible via keyboard

Tests Tab key navigation through all interactive elements
Detects missing focus indicators
Checks for keyboard traps (focus gets stuck)
Severity: Serious (keyboard-dependent users are locked out)

Focus Indicators — Focused elements must be visually obvious

Detects missing focus outlines
Checks focus indicator contrast and visibility
Severity: Moderate

Heading Hierarchy — Headings must follow logical structure (H1 → H2 → H3)

Detects skipped heading levels (e.g., H1 → H4)
Checks for multiple H1 tags on a page
Severity: Moderate (impacts page structure for screen readers)

Navigation Landmarks — Pages must have navigation structures

Detects missing <main>, <nav>, <header>, <footer> tags
Checks for logical page regions
Severity: Moderate

Understandable (Content is clear and predictable)

Form Labels — Form inputs must have associated labels

Detects <input> without <label> or aria-label
Checks label text clarity
Severity: Serious (screen reader users don’t know what fields are)

Error Identification — Form errors must be clear and specific

Detects error messages without associated fields
Checks error text clarity
Severity: Serious

Language Declaration — Page language must be specified

Checks for lang attribute on <html>
Verifies language is correct
Severity: Minor

Robust (Content works with assistive technology)

Valid HTML — Code must follow HTML5 standards

Detects invalid markup
Checks for deprecated elements
Severity: Minor

ARIA Attributes — Assistive technology markup must be correct

Detects misused ARIA roles (e.g., role="button" on div without click handler)
Checks ARIA live regions for dynamic content
Verifies ARIA attribute values
Severity: Serious

Violation Categories

Category	Count	Priority	Typical Fix Time
Color contrast	Varies	High	1-2 hours
Missing alt text	Per image	High	30 min per image
Keyboard navigation	Per flow	High	2-4 hours
Form labels	Per field	High	1-2 hours
Heading hierarchy	1-5 per page	Medium	30 min
Focus indicators	Varies	Medium	1-2 hours
ARIA attributes	Varies	Medium	2-4 hours
Language declaration	1 per site	Low	5 min

Common Issues and Fixes

Issue: Low Text Contrast

Problem: Text color #888888 on background #FFFFFF has 4.3:1 contrast ratio (needs 4.5:1)

/* Before */
color: #888888;
 
/* After */
color: #666666; /* 5.2:1 contrast ratio */

Issue: Missing Alt Text

Problem: <img src="hero.jpg"> has no alt text

<!-- Before -->
<img src="hero.jpg">
 
<!-- After -->
<img src="hero.jpg" alt="Hero banner showing product features and benefits">

Issue: Non-Keyboard-Accessible Button

Problem: <div onclick="..."> not accessible via keyboard

<!-- Before -->
<div onclick="submitForm()">Submit</div>
 
<!-- After -->
<button onclick="submitForm()">Submit</button>
 
<!-- Or with ARIA -->
<div role="button" tabindex="0" onclick="submitForm()" onkeypress="submitForm()">Submit</div>

Issue: Missing Form Label

Problem: <input type="email"> not associated with label

<!-- Before -->
<label>Email:</label>
<input type="email">
 
<!-- After -->
<label for="email">Email:</label>
<input id="email" type="email">
 
<!-- Or with aria-label -->
<input aria-label="Email address" type="email">

Issue: Incorrect Heading Hierarchy

Problem: <h1> followed directly by <h4>

<!-- Before -->
<h1>Product Features</h1>
<h4>Feature Details</h4>
 
<!-- After -->
<h1>Product Features</h1>
<h2>Feature Details</h2>

Prioritizing Accessibility Fixes

Critical — Missing alt text, keyboard traps, form label issues
Serious — Low contrast, missing heading levels, missing ARIA labels
Moderate — Focus indicator styling, layout at 200% zoom
Minor — Language declaration, valid HTML

By User Base

Screen reader users — Priority: alt text, ARIA, heading hierarchy, form labels
Keyboard-only users — Priority: keyboard navigation, focus indicators, keyboard traps
Low vision users — Priority: color contrast, resizable text
Color-blind users — Priority: don’t rely on color alone (use icons, text, patterns)

CI/CD Integration for Accessibility

Catch accessibility regressions before they ship:

# GitHub Actions example
- name: Run Accessibility Audit
  run: |
    curl -X POST https://api.bugbrain.tech/api/v1/execute \
      -H "Authorization: Bearer ${{ secrets.BUGBRAIN_API_KEY }}" \
      -d '{
        "framework": "wcag",
        "url": "https://staging.example.com",
        "fail_on_serious": true
      }'

⚠️

Note: Some accessibility issues require manual testing (e.g., screen reader behavior, assistive device compatibility). BugBrain covers automated surface-level checks. Combine with manual testing and user testing with people with disabilities.

Running Audits GDPR Compliance