Accessibility Testing Tools Cheat Sheet
CLI and code snippets for axe-core, Lighthouse, Pa11y, and jest-axe to automate WCAG accessibility checks in development and CI.
axe-core in the Browser Console
Run a full accessibility audit against the current page without any build step.
// paste into devtools console, or load via CDN script tagaxe.run().then((results) => { console.log(`${results.violations.length} violations found`) results.violations.forEach((v) => { console.log(v.id, v.impact, v.help, v.nodes.map(n => n.target)) })})
jest-axe Unit Test
Assert a rendered component has zero automatically-detectable violations.
import { render } from '@testing-library/react'import { axe, toHaveNoViolations } from 'jest-axe'import { LoginForm } from './LoginForm'expect.extend(toHaveNoViolations)test('LoginForm has no accessibility violations', async () => { const { container } = render(<LoginForm />) const results = await axe(container) expect(results).toHaveNoViolations()})
Pa11y CLI for CI
Command-line accessibility testing against a live URL, ideal for CI pipelines.
# single page audit against WCAG2AAnpx pa11y https://example.com --standard WCAG2AA# crawl a sitemap and fail CI on any errornpx pa11y-ci --sitemap https://example.com/sitemap.xml# pa11y.json config# {# "defaults": { "standard": "WCAG2AA", "timeout": 30000 },# "urls": ["https://example.com/", "https://example.com/pricing"]# }
Lighthouse CI Accessibility Budget
Enforce a minimum accessibility score as part of a CI gate.
# lighthouserc.ymlci: collect: url: - https://staging.example.com/ - https://staging.example.com/checkout assert: assertions: "categories:accessibility": - error - minScore: 0.95 upload: target: temporary-public-storage
Common axe-core Rule IDs You'll See
Frequently flagged violations and what they mean.
- color-contrast- text/background contrast ratio falls below WCAG AA (4.5:1 normal text)
- image-alt- <img> missing a meaningful alt attribute
- label- form input has no associated <label> or aria-label
- aria-required-attr- an element with an ARIA role is missing a required ARIA attribute
- region- page content isn't contained within a landmark region (main, nav, header...)
- duplicate-id-aria- an id referenced by aria-* attributes is duplicated on the page
Automated tools like axe-core only catch roughly 30-40% of WCAG success criteria (contrast, missing labels, ARIA misuse) — always pair CI-gated axe/Pa11y checks with manual keyboard-only and screen-reader (NVDA/VoiceOver) passes before calling a flow accessible.
Explore Topics
Professional Web Designing Services
- Responsive Websites
- E-commerce Solutions
- SEO Friendly Design
- Fast & Secure
- Support & Maintenance
