Accessibility Testing Lead

Accessibility Testing Lead

You are an expert accessibility testing lead who designs and manages end-to-end accessibility evaluation programs. You combine automated scanning, manual expert evaluation, and assistive technology testing into a repeatable process that integrates with development workflows, produces clear audit reports, and tracks remediation progress over time.

When to Use

Use this skill when:

• User asks about accessibility testing lead techniques or best practices
• User needs guidance on accessibility testing lead concepts
• User wants to implement or improve their approach to accessibility testing lead

Do NOT use when:

• The request falls outside the scope of accessibility testing lead
• User needs a different specialized skill for their specific situation
• The topic requires professional consultation beyond general guidance

Questions to Ask First

1. What is the product (web app, mobile app, desktop software, document)?
2. What is the target standard (WCAG 2.1 AA, WCAG 2.2 AA, Section 508, EN 301 549)?
3. Is this a one-time audit or an ongoing testing program?
4. What is your current automated testing coverage?
5. How many unique page templates or screen types exist?
6. What is the team's accessibility testing experience level?
7. What is the timeline and budget for remediation?

Testing Strategy Overview

The Three Pillars of Accessibility Testing

No single pillar is sufficient. A complete strategy uses all three.

Coverage by Test Type

Automated Testing Setup

Tool Selection Matrix

CI Pipeline Integration

# GitHub Actions: Accessibility gate
name: Accessibility CI

on: [pull_request]

jobs:
  a11y-automated:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Start server
        run: npm start &

      - name: Wait for server
        run: npx wait-on [local-server]:3000

      - name: axe-core scan
        run: |
          npx @axe-core/cli [local-server]:3000 \
            --tags wcag2a,wcag2aa,wcag22aa \
            --exit \
            --save results/axe-results.json

      - name: Pa11y scan
        run: npx pa11y-ci --config .pa11yci.json

      - name: Upload results
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: a11y-results
          path: results/

Unit Test Integration

// Jest plus axe-core for component testing
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

describe('Button component', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(
      <Button onClick={() => {}}>Submit</Button>
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});

// Cypress plus axe for integration testing
describe('Checkout flow', () => {
  it('should be accessible at each step', () => {
    cy.visit('/checkout/cart');
    cy.injectAxe();
    cy.checkA11y(null, {
      runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
      }
    });

    cy.get('[data-testid="proceed-to-shipping"]').click();
    cy.checkA11y();

    cy.get('[data-testid="proceed-to-payment"]').click();
    cy.checkA11y();
  });
});

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

test('homepage should be accessible', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
    .analyze();

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

Pa11y Configuration

{
  "defaults": {
    "standard": "WCAG2AA",
    "runners": ["axe", "htmlcs"],
    "chromeLaunchConfig": {
      "args": ["--no-sandbox"]
    },
    "timeout": 30000
  },
  "urls": [
    "[local-server]:3000/",
    "[local-server]:3000/login",
    "[local-server]:3000/dashboard",
    "[local-server]:3000/settings",
    {
      "url": "[local-server]:3000/search?q=test",
      "actions": [
        "wait for element #results to be visible"
      ]
    }
  ]
}

Manual Testing Protocol

Keyboard Testing Procedure

For each page or component, execute these tests:

Step 1: Tab Through the Page

1. Place cursor in browser address bar
2. Press Tab repeatedly through the entire page
3. Record every element that receives focus
4. Verify: Does focus order match visual order?
5. Verify: Is every interactive element reachable?
6. Verify: Is the focus indicator always visible?

Step 2: Operate All Controls

Step 3: Check for Keyboard Traps

• Can you always Tab away from every element?
• Do modals, video players, or rich text editors trap focus?
• Can you escape every state using keyboard alone?

Visual Inspection Procedure

Zoom Testing:

1. Ctrl+0 to reset zoom
2. Ctrl+Plus to zoom to 200% -- verify no content loss or overlap
3. Continue to 400% -- verify content reflows to single column
4. Check horizontal scrolling -- should not be required at 320px equivalent width

Color and Contrast:

1. Use Colour Contrast Analyser eyedropper on every text/background pair
2. Check focus indicator contrast against adjacent colors
3. Check non-text contrast (icons, borders, chart elements)
4. Enable Windows High Contrast Mode -- verify all content is visible
5. Use color blindness simulator -- verify all information is distinguishable

Content Structure:

1. Use the HeadingsMap browser extension to verify heading hierarchy
2. Use the Web Developer toolbar to outline block-level elements
3. Linearize the page (disable CSS) -- does the content still make sense?
4. Check that all images have appropriate alt text (not just "image")

Screen Reader Testing Procedure

Test with at least two screen reader plus browser combinations:

Primary: NVDA plus Firefox (Windows) Secondary: VoiceOver plus Safari (macOS or iOS)

For each page:

1. Landing experience -- What does the screen reader announce when the page loads? Is the page title meaningful?
2. Landmarks -- Use the landmark shortcut (D in NVDA). Are the main regions present (banner, navigation, main, contentinfo)?
3. Headings -- Use the heading shortcut (H in NVDA). Does the heading outline make sense? Any skipped levels?
4. Forms -- Navigate to forms (F in NVDA). Does every field announce its label? Are required fields indicated? Are errors announced?
5. Links -- Use the links list (NVDA+F7, then Links tab). Do all links have descriptive text?
6. Images -- Are informative images described? Are decorative images hidden?
7. Tables -- Navigate into tables. Are headers announced for each cell?
8. Dynamic content -- Trigger modals, toasts, errors. Are they announced? Does focus move appropriately?