Monitor website accessibility issues

Automated accessibility scanning with Pa11y

This scans multiple pages and generates a report of WCAG violations. Install first with: npm install pa11y. Adapt the URLs to your website's key pages.

// First run: npm install pa11y
const pa11y = require('pa11y');
const fs = require('fs');

// Pages to check
const urls = [
  'https://your-charity.org.uk/',
  'https://your-charity.org.uk/services',
  'https://your-charity.org.uk/donate',
  'https://your-charity.org.uk/contact',
  'https://your-charity.org.uk/get-involved'
];

// WCAG 2.1 AA standard (UK legal requirement)
const options = {
  standard: 'WCAG2AA',
  runners: ['axe'],  // Use axe-core rules
  includeNotices: false,
  includeWarnings: true
};

async function scanWebsite() {
  console.log(`Scanning ${urls.length} pages for accessibility issues...\n`);

  const allResults = [];
  let totalIssues = 0;

  for (const url of urls) {
    console.log(`Checking: ${url}`);

    try {
      const results = await pa11y(url, options);

      const pageResults = {
        url: url,
        issueCount: results.issues.length,
        issues: results.issues.map(issue => ({
          type: issue.type,  // error, warning, notice
          code: issue.code,  // WCAG code (e.g., WCAG2AA.Principle1.Guideline1_4.1_4_3.G18)
          message: issue.message,
          context: issue.context,  // HTML snippet
          selector: issue.selector  // CSS selector to find element
        }))
      };

      allResults.push(pageResults);
      totalIssues += results.issues.length;

      console.log(`  Found ${results.issues.length} issues`);

    } catch (error) {
      console.error(`  Error scanning ${url}: ${error.message}`);
    }
  }

  // Categorise by severity
  let errors = 0;
  let warnings = 0;

  allResults.forEach(page => {
    page.issues.forEach(issue => {
      if (issue.type === 'error') errors++;
      if (issue.type === 'warning') warnings++;
    });
  });

  console.log(`\n============================================================`);
  console.log('Summary:');
  console.log(`  Total issues: ${totalIssues}`);
  console.log(`  Errors (must fix): ${errors}`);
  console.log(`  Warnings (should fix): ${warnings}`);

  // Group by type of issue
  const issueTypes = {};
  allResults.forEach(page => {
    page.issues.forEach(issue => {
      const message = issue.message;
      if (!issueTypes[message]) {
        issueTypes[message] = { count: 0, examples: [] };
      }
      issueTypes[message].count++;
      if (issueTypes[message].examples.length < 3) {
        issueTypes[message].examples.push({
          url: page.url,
          context: issue.context
        });
      }
    });
  });

  // Show most common issues
  const sorted = Object.entries(issueTypes)
    .sort((a, b) => b[1].count - a[1].count)
    .slice(0, 10);

  console.log(`\nTop 10 most common issues:`);
  sorted.forEach(([message, data], index) => {
    console.log(`\n${index + 1}. ${message}`);
    console.log(`   Occurs ${data.count} times`);
    console.log(`   Example: ${data.examples[0].url}`);
    console.log(`   HTML: ${data.examples[0].context.substring(0, 100)}...`);
  });

  // Detailed results by page
  console.log(`\n============================================================`);
  console.log('Detailed results by page:\n');

  allResults.forEach(page => {
    console.log(`${page.url} (${page.issueCount} issues)`);

    // Group by severity
    const errors = page.issues.filter(i => i.type === 'error');
    const warnings = page.issues.filter(i => i.type === 'warning');

    if (errors.length > 0) {
      console.log(`  ERRORS (${errors.length}):`);
      errors.slice(0, 5).forEach(issue => {
        console.log(`    - ${issue.message}`);
        console.log(`      Selector: ${issue.selector}`);
      });
    }

    if (warnings.length > 0) {
      console.log(`  WARNINGS (${warnings.length}):`);
      warnings.slice(0, 3).forEach(issue => {
        console.log(`    - ${issue.message}`);
      });
    }

    console.log('');
  });

  // Save detailed report
  const report = {
    scanDate: new Date().toISOString(),
    summary: {
      totalPages: urls.length,
      totalIssues: totalIssues,
      errors: errors,
      warnings: warnings
    },
    pages: allResults,
    topIssues: sorted.map(([message, data]) => ({
      message,
      count: data.count,
      examples: data.examples
    }))
  };

  fs.writeFileSync('accessibility-report.json', JSON.stringify(report, null, 2));
  console.log('Detailed report saved to accessibility-report.json');

  console.log('\nNext steps:');
  console.log('1. Fix all errors (these violate WCAG standards)');
  console.log('2. Review warnings and fix where possible');
  console.log('3. Re-run this scan to verify fixes');
  console.log('4. Schedule regular scans (weekly/monthly)');
  console.log('5. Combine with manual testing for full compliance');
}

scanWebsite().catch(console.error);