accessibility-checker

Accessibility Checker Skill

Purpose

This skill provides comprehensive accessibility validation against WCAG 2.1 Level AA standards, combining automated testing with manual verification procedures.

When to Use

• Accessibility audits for new features
• WCAG 2.1 Level AA compliance checks
• Pre-release accessibility validation
• Accessibility regression testing
• Legal compliance verification (ADA, Section 508)

WCAG 2.1 Level AA Validation Workflow

1. Automated Accessibility Scanning

Using Axe-core with Playwright:

// Install axe-core
npm install -D @axe-core/playwright

// Accessibility test
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('page should not have accessibility violations', async ({ page }) => {
  await page.goto('/');

  const accessibilityScanResults = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
    .analyze();

  expect(accessibilityScanResults.violations).toEqual([]);
});

Scan All Pages:

# Create script to scan all pages
cat > scripts/accessibility-scan.js << 'EOF'
const { chromium } = require('playwright');
const AxeBuilder = require('@axe-core/playwright').default;

async function scanPage(url) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(url);

  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
    .analyze();

  await browser.close();
  return results;
}

// Scan multiple pages
const pages = [
  'http://localhost:3000/',
  'http://localhost:3000/about',
  'http://localhost:3000/products',
];

(async () => {
  for (const url of pages) {
    console.log(`Scanning ${url}`);
    const results = await scanPage(url);
    console.log(`Violations: ${results.violations.length}`);
  }
})();
EOF

node scripts/accessibility-scan.js

Deliverable: Automated scan results with violation list