Accessibility testing
Accessibility that only gets better.
Turn on accessibility checks today, even with thousands of known issues. Happo tracks the ones you have, stops new ones at the pull request, and shows you the number going down.
Included on every plan, the free one too.
Open accessibility violations
Main branch, end of each day
142 open
- 0 critical
- 18 serious
- 71 moderate
- 53 minor
| Day | Open violations |
|---|---|
| Day 1 | 2,184 |
| Day 2 | 2,184 |
| Day 3 | 1,720 |
| Day 4 | 1,702 |
| Day 5 | 1,215 |
| Day 6 | 1,190 |
| Day 7 | 1,190 |
| Day 8 | 1,190 |
| Day 9 | 860 |
| Day 10 | 802 |
| Day 11 | 760 |
| Day 12 | 540 |
| Day 13 | 516 |
| Day 14 | 516 |
| Day 15 | 516 |
| Day 16 | 380 |
| Day 17 | 301 |
| Day 18 | 262 |
| Day 19 | 198 |
| Day 20 | 160 |
| Day 21 | 160 |
| Day 22 | 142 |
The rollout
Day one: 2,184 issues. Now what?
That’s the kind of number you get the first time you check a big app. Fix them all first, and the checks never ship. Block every pull request on them, and the checks get turned off by Friday. Happo takes a third way.
- Day one
Turn it on
Every violation you already have is recorded, and none of them block anyone. Your team keeps shipping the same afternoon.
- Every pull request
New ones stop at review
A change that adds a violation blocks approval, with the element outlined on a screenshot next to the visual diffs. The fix happens while the code is still fresh.
- Every week after
The number only goes down
Fix a shared component and hundreds of issues go at once. Violations are graded by impact and charted over time, for your team and for anyone who asks.
In the review
What broke, where, and how to fix it.
A new violation lands in the same comparison as the visual diffs, so one review covers both. Happo points out the element on a screenshot of the page, and tells you the rule, how serious it is, and what to change.
Pick a numbered element to see what is wrong with it.
Pointed out on the page
Every failing element is outlined and numbered on a screenshot, in the color of its impact: critical, serious, moderate, or minor. Pick one to see what’s wrong with it. No more working out which button a selector means.
New is new
The low-contrast text was there before this pull request, so it doesn’t block it. The missing label and button name are new, so they do.
WCAG 2.0 and 2.1, A and AA
Labels, contrast, link names, alt text, and dozens more rules, checked in a real browser with your styles applied. Turn off a rule that doesn’t apply to you.
Screen readers
Changes you can’t see, but your users hear.
Some regressions never change a pixel. Happo snapshots the accessibility tree of each component, the page as a screen reader presents it, and shows you when that changes too.
- navigation "Trips": - link "Upcoming" - link "Past" - main: Before: - heading "Lisbon, 3 nights" [level=1] After: - heading "Lisbon, 3 nights" [level=2] - text: Apr 12 to 15, 2 guests Before: - button "Cancel trip" After: - button
The screenshot looks the same, and no rule fails. But a screen reader now announces a heading one level down and a button with no name. Happo shows it as a diff, so someone decides whether it was meant.
- A button that loses its name
- A heading that drops a level
- A list that stops being a list
- A label that no longer points at its field
Setup
One more target. No new tests.
If you already run Happo with Storybook, Playwright, or Cypress, accessibility testing is one more target in your config. Every snapshot you take is checked from then on.
export default defineConfig({
targets: {
chrome: { type: 'chrome', viewport: '1024x768' },
accessibility: {
type: 'accessibility',
viewport: '1024x768',
},
},
});- Included on every plan. Most tools sell accessibility testing separately. Each accessibility snapshot counts as one snapshot.
- Ready for the European Accessibility Act. The chart over time is the reporting you’ll want. What the EAA means for you
FAQ
Questions, answered
Will my existing violations block pull requests?
No. Violations that were already on your base branch are tracked, not blocked. Only a violation a pull request adds blocks its approval, so nobody gets stuck on a problem they didn’t cause.
How do I find the element a violation is about?
Happo shows you. When a snapshot’s violations are on elements it can point at, it comes with a screenshot of the part of the page they are in, with every failing element outlined and numbered. Switch to the list, and each element has a close-up next to its selector and HTML. Agents reviewing through Happo’s MCP server get the same picture.
Do I have to write new tests?
No. Add an accessibility target to your Happo config, and every story or screenshot you already take is checked too.
Which rules and standards does Happo check?
Happo checks against WCAG 2.0 and 2.1 at levels A and AA: form labels, color contrast, link names, alt text, ARIA attributes, and dozens more. You can turn off a rule or narrow the run to the levels you care about.
Does accessibility testing cost extra?
No. It’s included on every plan, the free one too. Each accessibility snapshot counts as one snapshot toward your plan. See pricing.
Does this replace a manual accessibility audit?
No, and no automated tool can. Automated checks catch a large share of common problems on every change, which keeps an audit’s fixes from coming undone. Keep testing with real people and assistive technology too.
Start where you are.
Turn on accessibility checks this afternoon, issues and all. From your next pull request on, the number only goes down.
Start free with 5,000 snapshots a month. No credit card needed.