Testing Module Project — Complete Guide

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

This capstone project combines all testing techniques from this module into a single comprehensive Accessibility Testingity" >}} testing plan for an e-commerce website, including automated scans, manual checklists, screen reader testing, CI/CD integration, and a monitoring dashboard.

Project Overview

You will test a sample e-commerce website (or your own project) using every technique in this module. Document your Process, findings, and fixes in a final report.

Project Steps

flowchart TD
  A[Choose Target Site] --> B[Automated Scan]
  B --> C[Manual Keyboard Test]
  C --> D[Screen Reader Test]
  D --> E[Contrast Test]
  E --> F[Zoom Test]
  F --> G[Fix Issues]
  G --> H[CI/CD Pipeline]
  H --> I[Dashboard]
  I --> J[Final Report]

Step 1: Automated Scan

Run axe-core, Lighthouse, and WAVE against your target site. Document all violations.

# Automated scan commands
npx axe https://your-site.com --exit --save axe-results.json
lighthouse https://your-site.com --output=json --output-path=./lh-report.json

Record the Lighthouse score and the number of violations per severity level.

Step 2: Manual Testing

Create a manual testing checklist and execute it against the same pages.

<!-- Manual test checklist example -->
<h2>Keyboard Test Checklist</h2>
<ul>
  <li>Tab through all interactive elements in order</li>
  <li>Verify focus indicator is visible on all elements</li>
  <li>Test all dropdown menus with arrow keys</li>
  <li>Verify Escape closes all overlays</li>
  <li>Test both Tab and Shift+Tab navigation</li>
</ul>

Step 3: Screen Reader and Contrast Testing

Test with NVDA or VoiceOver. Check contrast ratios for all text and UI elements.

/* Example: fixing contrast issues found in testing */
:root {
  --text-primary: #1a1a1a; /* Passes AAA */
  --text-secondary: #555555; /* 5.1:1 against white -- passes AA */
  --link-color: #0056b3; /* 4.7:1 against white -- passes AA */
  --error-color: #cc0000; /* 5.2:1 against white -- passes AA */
}

Step 4: Fix and Re-test

Fix all critical and serious issues. Re-run automated scans to confirm fixes.

// CI/CD configuration for the project
// .github/workflows/a11y.yml
const workflow = {
  name: 'Accessibility',
  on: { pull_request: { branches: ['main'] } },
  jobs: {
    a11y: {
      'runs-on': 'ubuntu-latest',
      steps: [
        { uses: 'actions/checkout@v4' },
        { run: 'npm ci' },
        { run: 'npm run build' },
        { run: 'npx axe http://localhost:3000 --exit' }
      ]
    }
  }
};

Step 5: Dashboard

Create a simple dashboard showing your before-and-after metrics.

<div class="project-dashboard">
  <div class="before">
    <h3>Before</h3>
    <p>Lighthouse Score: 62</p>
    <p>Violations: 24 (5 critical)</p>
  </div>
  <div class="after">
    <h3>After</h3>
    <p>Lighthouse Score: 95</p>
    <p>Violations: 3 (0 critical)</p>
  </div>
</div>

Deliverables

Submit: automated scan results (JSON), manual testing checklist with findings, screen reader testing notes, CI/CD configuration files, dashboard HTML, and a final report summarizing the process and improvements.

What's Next

Accessibility Auditing covers the systematic audit methodology for comprehensive accessibility evaluation.