| 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
