Axe Accessibility Testing

Axe accessibility testing uses the axe-core library and related tools to identify accessibility issues in web interfaces. Axe has become an industry standard for automated accessibility testing with broad integration support.

What Is Axe Accessibility Testing

Axe is an accessibility testing engine created by Deque Systems. The core library (axe-core) powers various implementations: browser extensions, testing framework integrations, and CI/CD tools.

Axe tests for WCAG compliance issues including:

• Missing or improper ARIA usage
• Color contrast violations
• Missing form labels
• Improper heading hierarchy
• Image alt text issues
• Keyboard accessibility problems

Axe rules are carefully maintained to minimize false positives while catching genuine issues. Each rule maps to specific WCAG success criteria.

How Axe Accessibility Testing Works

axe-core library integrates with testing frameworks. Install the library and run checks against rendered HTML:

axe DevTools browser extension provides manual testing capability. Open DevTools, navigate to the axe panel, and scan the current page. Issues appear with descriptions, impact levels, and remediation guidance.

@axe-core/react integrates with React testing approaches, providing React-specific testing utilities.

jest-axe simplifies Jest integration with custom matchers:

axe CI/CD integration runs checks in continuous integration pipelines. Configure rules, impact levels, and failure thresholds:

Results include detailed information: which elements fail, what rule they violate, why it matters, and how to fix it.

Key Considerations

• Use axe-core for programmatic testing in CI/CD
• Use axe DevTools for manual testing during development
• Configure rules to match your WCAG target level
• Address violations by impact level (critical, serious, moderate, minor)
• Do not ignore results; axe has low false positive rates
• Supplement axe with manual testing for issues it cannot catch
• Stay updated as axe rules evolve with WCAG updates

Common Questions

What does axe catch versus miss?

Axe catches approximately 30-40% of accessibility issues, specifically those that can be determined programmatically:

• Missing alt text (but not whether alt text is meaningful)
• Contrast ratios below thresholds
• Missing form labels
• Invalid ARIA usage
• Duplicate IDs
• Empty interactive elements

Axe cannot determine whether content makes sense, keyboard focus order is logical, or screen reader experience is good. Manual testing addresses these.

How should axe impact levels be prioritized?

Axe categorizes issues by impact: critical, serious, moderate, and minor. Address critical and serious issues first as these most significantly affect users.

CI/CD configurations often fail on critical and serious while warning on moderate and minor. However, all issues should eventually be addressed.

Can axe be customized for design systems?

Axe supports custom rules and configuration. Design systems might:

• Disable rules that do not apply to their context
• Configure stricter thresholds (AAA instead of AA)
• Add custom rules for design system-specific patterns
• Tag rules for different testing scenarios

Configuration files can standardize axe setup across projects using the design system.

Summary

Axe accessibility testing provides industry-standard automated checking through axe-core library integration, browser extensions, and CI/CD tools. While axe catches many accessibility issues with low false positives, manual testing remains necessary for issues requiring human judgment.