accessibility

name	accessibility
description	Use this skill when writing, reviewing, or auditing accessibility tests and WCAG compliance checks. Covers WCAG 2.2 AA standards, axe-core integration with Playwright, color contrast, keyboard navigation, screen reader compatibility, ARIA labels, and focus management. Trigger when the user mentions accessibility, a11y, WCAG, axe-core, screen reader, or keyboard navigation testing.

Accessibility Testing Skill

A reference for GitHub Copilot to generate WCAG 2.2 AA compliance tests and accessibility audits.

---

WCAG 2.2 AA Compliance

When to use: Ensuring UI meets accessibility standards.

Prompting patterns:

Audit this page/component for WCAG 2.2 AA compliance. Check:
- Color contrast ratios (minimum 4.5:1 for normal text)
- Keyboard navigation and focus management
- Screen reader compatibility (ARIA labels, roles, live regions)
- Form labels and error messages
- Image alt text

---

Automated Testing with axe-core

Prompting patterns:

Write a Playwright test that uses @axe-core/playwright to scan [page/component] for accessibility violations. Group results by WCAG criterion and include remediation suggestions for any failures.

Example:

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

test('should have no accessibility violations', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa'])
    .analyze();
  expect(results.violations).toEqual([]);
});

---

Best Practices

• Automate what you can with axe-core, but manual testing is still needed for keyboard flow and screen reader behavior
• Test at multiple viewport sizes — accessibility issues often appear on mobile
• Check dynamic content (modals, dropdowns, toast notifications) for focus trapping and ARIA updates
• Verify skip-to-content links exist and work
• Test with keyboard only — Tab, Shift+Tab, Enter, Escape, Arrow keys
• Ensure focus is visible on all interactive elements
• Check that color is not the only means of conveying information