WCAG Compliance Project — Evaluation and Remediation Plan

In this tutorial, you will learn about WCAG Compliance Project. We cover key concepts, practical examples, and best practices to help you master this topic.

Apply WCAG knowledge by conducting a structured evaluation of a website using WCAG-EM methodology, documenting violations, creating a prioritized remediation plan, and publishing a conformance claim.

What You'll Learn

You will conduct a real WCAG evaluation, document findings, create a remediation plan, and write a conformance claim. This project applies everything from the 19 previous lessons.

Why It Matters

Theory without practice is forgettable. Conducting a real evaluation gives you hands-on experience with WCAG testing and remediation.

Real-World Use

DodaTech runs a similar evaluation Process quarterly for each product. The process follows WCAG-EM and produces documented results that support conformance claims.

flowchart LR
  A[Define Scope] --> B[Select Sample]
  B --> C[Evaluate]
  C --> D[Document]
  D --> E[Plan Remediation]
  E --> F[Publish Claim]
  A:::current
  classDef current fill:#f90,color:#fff,stroke:#333,stroke-width:2px

Project Requirements

Conduct a WCAG evaluation on a website of your choice (your own, your organization's, or a public site). Complete the following:

1. Define evaluation scope (WCAG 2.2 AA)
2. Select a sample of 3 to 5 pages
3. Evaluate each page against at least 10 success criteria
4. Document all violations with screenshots
5. Create a prioritized remediation plan
6. Write a draft conformance claim

Evaluation Template

// WCAG evaluation template
const evaluation = {
  siteName: 'Your site name',
  wcagVersion: '2.2',
  conformanceLevel: 'AA',
  evaluationDate: '2026-06-28',
  evaluator: 'Your name',
  scope: ['Home page', 'Product page', 'Contact form', 'Dashboard'],

  criteria: [
    {
      id: '1.1.1',
      name: 'Non-text Content',
      level: 'A',
      status: 'fail',
      notes: '3 images missing alt text on homepage',
      remediation: 'Add descriptive alt text to all informational images, empty alt to decorative images',
      effort: 'Low',
      priority: 1
    },
    {
      id: '1.4.3',
      name: 'Contrast Minimum',
      level: 'AA',
      status: 'fail',
      notes: 'Footer links use #999999 on white (2.8:1)',
      remediation: 'Change footer link color to #5a5a5a (5.2:1) or darker',
      effort: 'Low',
      priority: 1
    },
    {
      id: '2.1.1',
      name: 'Keyboard',
      level: 'A',
      status: 'pass',
      notes: 'All interactive elements keyboard accessible',
      remediation: 'None needed',
      effort: 'None',
      priority: 0
    },
    {
      id: '2.4.7',
      name: 'Focus Visible',
      level: 'AA',
      status: 'fail',
      notes: 'No visible focus indicator on dropdown menu items',
      remediation: 'Add outline: 2px solid #005fcc on :focus-visible for all interactive elements',
      effort: 'Medium',
      priority: 1
    },
    {
      id: '3.3.2',
      name: 'Labels or Instructions',
      level: 'A',
      status: 'fail',
      notes: 'Search input missing label',
      remediation: 'Add aria-label="Search" to search input or use label element',
      effort: 'Low',
      priority: 1
    },
    {
      id: '4.1.2',
      name: 'Name, Role, Value',
      level: 'A',
      status: 'fail',
      notes: 'Custom dropdown missing ARIA roles',
      remediation: 'Add role="listbox" and role="option" with aria-selected states',
      effort: 'Medium',
      priority: 2
    }
  ],

  generateReport() {
    const failed = this.criteria.filter(c => c.status === 'fail');
    const passed = this.criteria.filter(c => c.status === 'pass');
    return {
      total: this.criteria.length,
      passed: passed.length,
      failed: failed.length,
      passRate: `${((passed.length / this.criteria.length) * 100).toFixed(0)}%`,
      topPriorities: failed
        .filter(c => c.priority === 1)
        .map(c => `${c.id}: ${c.name} — ${c.remediation}`),
      conformanceStatus: failed.length === 0 ? 'Conforms' : 'Does not conform'
    };
  }
};

console.log(evaluation.generateReport());

Expected output:

{
  total: 6,
  passed: 1,
  failed: 5,
  passRate: '17%',
  topPriorities: ['1.1.1: Non-text Content — Add descriptive alt text to all informational images, empty alt to decorative images', '1.4.3: Contrast Minimum — Change footer link color to #5a5a5a (5.2:1) or darker', '2.4.7: Focus Visible — Add outline: 2px solid #005fcc on :focus-visible for all interactive elements', '3.3.2: Labels or Instructions — Add aria-label="Search" to search input or use label element'],
  conformanceStatus: 'Does not conform'
}

Remediation Plan Template

Audit Checklist

• Evaluation scope defined
• Sample pages selected (3 to 5)
• Each page tested against 10+ criteria
• Automated tools run (WAVE, axe)
• Keyboard testing completed
• Screen reader testing completed (optional)
• Violations documented with screenshots
• Remediation plan created
• Conformance claim drafted

Common Mistakes

1. Testing Only the Homepage

The homepage is often the most polished. Other pages may have more issues.

2. Not Documenting Screenshots

Screenshots provide evidence and make remediation easier for developers.

3. Creating an Unrealistic Remediation Plan

Be realistic about effort and timeline. Prioritize Level A and AA violations.

4. Forgetting to Re-test

After remediation, re-test to verify fixes. Some fixes introduce new issues.

5. Not Categorizing by Severity

Prioritize by WCAG level and impact on users. Fix critical barriers first.

6. Ignoring User Testing

Automated and manual testing are excellent. User testing with people with disabilities reveals issues no tool can find.

7. Not Publishing the Results

Share the evaluation report with your team. Transparency drives accountability.

FAQ

Mini Project

This is the final project. Complete the evaluation, create the remediation plan, and write the conformance claim. Share the results with your team or manager.

What's Next

You have completed the WCAG Compliance module. Continue to VPAT / ACR to learn about Accessibility conformance reporting. Or explore Cognitive Accessibility for designing for neurodivergent users.