Sample Remediation Report

See exactly what you get when you purchase a WCAG Repair remediation guide. This is a real report generated from an actual website audit.

71
Total Issues
0
Critical
21
Major
50
Minor
10
Pages Scanned

What's in the Report

  • Executive Summary — Overall compliance level, key risk areas, and estimated remediation timeline
  • Priority Remediation Plan — Every issue ordered by severity with WCAG references, problematic code, and corrected code examples
  • Page-by-Page Breakdown — Specific fixes for each scanned page
  • Testing Checklist — Manual testing steps, automated tools, and screen reader guidance

Report Preview

WCAG Remediation Guide: Example Business Professional Services

1. Executive Summary

Current Accessibility State

The Example Business website has been evaluated for WCAG 2.1 compliance across 10 pages, revealing 71 accessibility issues that require immediate attention. While no critical issues were identified, the site has significant barriers that prevent users with disabilities from accessing content effectively.

Key Risk Areas

  • Structural Navigation: Missing landmark elements and improper heading hierarchy
  • Visual Accessibility: Color contrast failures affecting readability
  • Keyboard Navigation: Links without accessible text preventing screen reader access
  • Content Organization: Page content not properly contained within semantic landmarks

Overall Compliance Level

Current Status: Non-compliant with WCAG 2.1 AA standards
- 21 Major violations (WCAG Level A/AA failures)
- 50 Minor violations (Best practice and usability issues)
- Primary risk: Users with screen readers, low vision, and motor disabilities will face significant barriers

Estimated Remediation Timeline: 2-3 weeks with developer resources

2. Priority Remediation Plan

MAJOR SEVERITY ISSUES

Issue #1: Links Without Accessible Text

WCAG Reference: 2.4.4 Link Purpose (In Context) & 4.1.2 Name, Role, Value
Severity: Serious
Affected Pages: /about/
WCAG Level: AA

Current Problematic Code:

<a href="https://example-business.com/">
  <span><i class="fa fa-home cz_breadcrumbs_home"></i></span>
</a>

Recommended Fix:

<a href="https://example-business.com/" aria-label="Home">
  <span><i class="fa fa-home cz_breadcrumbs_home" aria-hidden="true"></i></span>
</a>

Alternative Fix (Preferred):

<a href="https://example-business.com/">
  <span class="sr-only">Home</span>
  <i class="fa fa-home cz_breadcrumbs_home" aria-hidden="true"></i>
</a>

Estimated Effort: Low (1-2 hours)

Issue #2: Color Contrast Failures

WCAG Reference: 1.4.3 Contrast (Minimum)
Severity: Serious
Affected Pages: /pricing/
WCAG Level: AA

Current Problematic Code:

<!-- Contrast ratio: 2.07 (Required: 3:1 for large text) -->
<span style="color: #ffffff;">$115</span> <!-- Background: #b4b4b4 -->

<!-- Contrast ratio: 2.07 (Required: 4.5:1 for normal text) -->
<strong>Get started</strong> <!-- White text on #b4b4b4 background -->

Recommended Fix:

<!-- Option 1: Darker background -->
<span style="color: #ffffff; background-color: #767676;">$115</span>

<!-- Option 2: Darker text -->
<span style="color: #2c2c2c; background-color: #b4b4b4;">$115</span>

<!-- For buttons -->
<strong style="color: #ffffff; background-color: #767676;">Get started</strong>

Color Palette Recommendations:
- White text (#ffffff) requires background of #767676 or darker
- For #b4b4b4 background, use text color #2c2c2c or darker

Estimated Effort: Medium (4-6 hours)

Issue #3: Improper Heading Hierarchy

WCAG Reference: 1.3.1 Info and Relationships
Severity: Moderate
Affected Pages: /about/
WCAG Level: A

Current Problematic Code:

<!-- Missing H1, jumping directly to H3 -->
<h3>About Us</h3>

Recommended Fix:

<!-- Add proper H1 for page title -->
<h1>About Example Business</h1>
<h2>Our Story</h2>
<h3>About Us</h3>

Estimated Effort: Low (2-3 hours)

MODERATE SEVERITY ISSUES

Issue #4: Missing Main Landmark

WCAG Reference: 2.4.1 Bypass Blocks
Severity: Moderate
Affected Pages: All pages
WCAG Level: A

Current Problematic Code:

<html lang="en-US" prefix="og: https://ogp.me/ns#">
  <!-- Content without proper landmark structure -->
  <div class="content-wrapper">
    <!-- Page content here -->
  </div>
</html>

Recommended Fix:

<html lang="en-US" prefix="og: https://ogp.me/ns#">
  <body>
    <header role="banner">
      <nav role="navigation" aria-label="Main navigation">
        <!-- Navigation content -->
      </nav>
    </header>

    <main role="main" id="main-content">
      <!-- Primary page content -->
    </main>

    <footer role="contentinfo">
      <!-- Footer content -->
    </footer>
  </body>
</html>

Estimated Effort: Medium (6-8 hours across all pages)

Issue #5: Content Not Contained by Landmarks

WCAG Reference: 2.4.1 Bypass Blocks
Severity: Moderate
Affected Pages: Homepage
WCAG Level: A

Current Problematic Code:

<div id="cz_102354" class="cz_102354 cz_title clr cz_smart_fs">
  <!-- Content outside of semantic landmarks -->
</div>
<div class="vc_row wpb_row vc_row-fluid">
  <!-- More content without landmarks -->
</div>

Recommended Fix:

<main>
  <section aria-labelledby="services-heading">
    <div id="cz_102354" class="cz_102354 cz_title clr cz_smart_fs">
      <h2 id="services-heading">Our Services</h2>
      <!-- Content now properly contained -->
    </div>
  </section>

  <section aria-labelledby="features-heading">
    <div class="vc_row wpb_row vc_row-fluid">
      <h2 id="features-heading">Why Choose Us</h2>
      <!-- Content with proper semantic structure -->
    </div>
  </section>
</main>

Estimated Effort: Medium (4-5 hours)

Issue #6: Missing Level-One Heading

WCAG Reference: 2.4.6 Headings and Labels
Severity: Moderate
Affected Pages: /schedule/
WCAG Level: AA

Current Problematic Code:

<!-- Page has no H1 element -->
<div class="page-content">
  <h2>Class Schedule</h2>
</div>

Recommended Fix:

<main>
  <h1>Class Schedule - Example Business</h1>
  <section>
    <h2>Weekly Classes</h2>
    <!-- Schedule content -->
  </section>
</main>

Estimated Effort: Low (1 hour per affected page)

3. Page-by-Page Breakdown

Homepage (https://example-business.com) - 13 Issues

Priority Issues:
1. Missing main landmark - Add <main> wrapper around primary content
2. Content outside landmarks - Wrap sections in semantic HTML5 elements
3. Title elements without proper structure - Implement proper heading hierarchy

Remediation Steps:

<!-- Before -->
<div class="content-area">
  <div id="cz_102354" class="cz_title">...</div>
</div>

<!-- After -->
<main>
  <section aria-labelledby="hero-heading">
    <h1 id="hero-heading">Join Our Professional Services</h1>
    <div id="cz_102354" class="cz_title">...</div>
  </section>
</main>

About Page (/about/) - 5 Issues

Priority Issues:
1. Link without accessible text - Add aria-label to home icon link
2. Improper heading order - Add H1 and restructure heading hierarchy

Remediation Steps:

<!-- Fix breadcrumb link -->
<a href="https://example-business.com/" aria-label="Return to homepage">
  <i class="fa fa-home cz_breadcrumbs_home" aria-hidden="true"></i>
</a>

<!-- Add proper page structure -->
<main>
  <h1>About Example Business</h1>
  <section>
    <h2>Our Mission</h2>
    <h3>About Us</h3>
  </section>
</main>

Pricing Page (/pricing/) - 11 Issues

Priority Issues:
1. Color contrast failures - Update color scheme for pricing cards
2. Missing semantic structure - Add proper landmarks

Remediation Steps:

<!-- Fix pricing card contrast -->
<div class="pricing-card" style="background-color: #2c2c2c;">
  <h3><span style="color: #ffffff;">$115</span></h3>
  <button style="background-color: #005fcc; color: #ffffff;">
    <strong>Get started</strong>
  </button>
</div>

Contact Page (/contact/) - 10 Issues

Priority Issues:
1. Form accessibility - Add proper labels and error handling
2. Missing landmarks - Structure form within main content area

Remediation Steps:

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Get in Touch</h2>
    <form>
      <label for="name">Full Name (required)</label>
      <input type="text" id="name" name="name" required aria-describedby="name-error">
      <div id="name-error" class="error-message" role="alert"></div>
    </form>
  </section>
</main>

Schedule Page (/schedule/) - 2 Issues

Priority Issues:
1. Missing H1 heading - Add page title
2. Content structure - Organize schedule in accessible format

Remediation Steps:

<main>
  <h1>Class Schedule</h1>
  <section>
    <h2>Weekly Schedule</h2>
    <table>
      <caption>Weekly class schedule with times and instructors</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Time</th>
          <th scope="col">Class</th>
        </tr>
      </thead>
      <tbody>
        <!-- Schedule data -->
      </tbody>
    </table>
  </section>
</main>

Remaining Pages

Services (/services/) - 8 issues: Focus on landmark structure and heading hierarchy
Founder (/founder/) - 5 issues: Add proper page title and semantic structure
Testimonials (/testimonials/) - 5 issues: Structure testimonials accessibly
Classes (/classes/) - 4 issues: Organize class listings semantically
Sign Up (/sign-up/) - 8 issues: Focus on form accessibility and validation

4. Testing Checklist

Manual Testing Steps

1. Keyboard Navigation Testing

  • [ ] Tab through entire site using only keyboard
  • [ ] Verify all interactive elements are reachable
  • [ ] Check focus indicators are visible and clear
  • [ ] Test skip links functionality
  • [ ] Ensure logical tab order throughout pages

2. Screen Reader Testing

  • [ ] Test with NVDA (free Windows screen reader)
  • [ ] Test with JAWS (if available)
  • [ ] Test with VoiceOver (macOS)
  • [ ] Verify all content is announced correctly
  • [ ] Check heading navigation works properly
  • [ ] Test landmark navigation

3. Visual Testing

  • [ ] Test at 200% zoom level
  • [ ] Check color contrast ratios with tools
  • [ ] Verify text remains readable when zoomed
  • [ ] Test with Windows High Contrast mode
  • [ ] Check focus indicators at high zoom levels

Automated Testing Tools

Primary Tools

  1. axe DevTools Browser Extension
  2. Install: Chrome/Firefox extension
  3. Run on each page after fixes

  4. Export results for comparison

  5. WAVE Web Accessibility Evaluator

  6. URL: https://wave.webaim.org/
  7. Test each page URL

  8. Review errors, alerts, and features

  9. Lighthouse Accessibility Audit

  10. Built into Chrome DevTools
  11. Run Performance > Accessibility audit
  12. Aim for score of 95+ after remediation

Color Contrast Tools

  • WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
  • Colour Contrast Analyser: Free desktop application
  • axe DevTools: Built-in contrast checking

Screen Reader Testing Guidance

NVDA Testing (Windows)

  1. Download NVDA (free): https://www.nvaccess.org/
  2. Basic Navigation Commands:
  3. H key: Navigate by headings
  4. D key: Navigate by landmarks
  5. F key: Navigate by form fields
  6. L key: Navigate by links
  7. T key: Navigate by tables

Testing Scripts

# Test homepage structure
1. Press H to navigate headings - should have logical H1, H2, H3 structure
2. Press D to navigate landmarks - should have main, navigation, contentinfo
3. Tab through all interactive elements - all should have clear labels
4. Test pricing page at 200% zoom - all text should remain readable

Verification Checklist

Issue #1: Links Without Accessible Text

  • [ ] All icon-only links have aria-label or visible text
  • [ ] Screen reader announces meaningful link purpose
  • [ ] Breadcrumb navigation is fully accessible

Issue #2: Color Contrast

  • [ ] All text meets minimum contrast ratios:
  • Normal text: 4.5:1
  • Large text (18pt+ or 14pt+ bold): 3:1
  • [ ] Button text is clearly readable
  • [ ] High contrast mode displays correctly

Issue #3: Heading Hierarchy

  • [ ] Each page has exactly one H1
  • [ ] Headings follow logical order (H1→H2→H3, no skipping)
  • [ ] Screen reader heading navigation works smoothly

Issue #4: Landmark Structure

  • [ ] Every page has <main> landmark
  • [ ] Header content in <header> or role="banner"
  • [ ] Navigation in <nav> or role="navigation"
  • [ ] Footer in <footer> or role="contentinfo"
  • [ ] All content contained within appropriate landmarks

Issue #5: Content Organization

  • [ ] All visible content is within semantic landmarks
  • [ ] Page structure makes sense when navigating by landmarks
  • [ ] Users can skip to main content efficiently

Final Validation

  • [ ] Run complete automated scan with 0 critical/major issues
  • [ ] Complete manual keyboard navigation test
  • [ ] Verify screen reader compatibility
  • [ ] Test responsive design accessibility at various zoom levels
  • [ ] Validate HTML to ensure no structural errors

Success Criteria: All issues resolved, WCAG 2.1 AA compliance achieved, and positive user testing with assistive technology users.

Download the Full PDF

Get the complete report as a professionally formatted PDF.

Download Sample Report (PDF)

Ready to scan your site?

Get a personalized remediation guide with specific code fixes for your website.

Scan Your Site Free