Accessibility Testing
Axe-core integration, WCAG 2.2 AA checklist, keyboard navigation testing, screen reader...
Install
npx skills add vibeeval/vibecosystem --skill accessibility-testing -g -a claude-code -y- Repository
- vibeeval/vibecosystem541
- Category
- Testing
- Updated
- 3mo ago
- License
- MIT
- Context cost
- Mediumabout 2,080 tokens
- Runs scripts
- No, instructions only
What it does
axe-core integration, WCAG 2.2 AA checklist, keyboard navigation testing, screen reader testing, and ARIA pattern validation.
Accessibility Testing
axe-core Setup
jest-axe (unit / component tests)
import { axe, toHaveNoViolations } from 'jest-axe'
import { render } from '@testing-library/react'
expect.extend(toHaveNoViolations)
test('LoginForm has no a11y violations', async () => {
const { container } = render(<LoginForm />)
const results = await axe(container)
expect(results).toHaveNoViolations()
})
playwright-axe (e2e)
import { test, expect } from '@playwright/test'
import AxeBuilder from '@axe-core/playwright'
test('homepage passes axe audit', async ({ page }) => {
await page.goto('/')
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
.analyze()
expect(results.violations).toEqual([])
})
cypress-axe
// cypress/support/e2e.js
import 'cypress-axe'
// in test
cy.visit('/')
cy.injectAxe()
cy.checkA11y(null, {
runOnly: { type: 'tag', values: ['wcag2aa'] },
})
