100+ curated cheat sheets to debug accessibility early and achieve WCAG compliance faster.
Demo
Ran an accessibility scan and got back a list like "color-contrast", "aria-allowed-attr" and "label"? Most of a team can't tell from that who's affected, how bad it is, whose job the fix is, or how to check it's fixed. The A11Y Cheat Sheet gives every scanner rule its own card, written for people. Search by the rule ID, or paste the scanner's message as it came. Each card shows:
- What's going wrong, in plain words, and what it means for a real person
- How serious it is, and its WCAG level
- Who owns the fix: design, dev, content, QA or product
- Whether a scanner catches it, or it needs a check by hand
- Who it affects, and what it costs the business
- The fix, wrong and right side by side
- A 30-second test anyone can run, with links to the WCAG criteria
Cards are grouped into 12 themes, in the order teams test, with filters to narrow them down. It's free and public: https://a11yuniversity.org/a11y-cheat-sheet In this video I've left my teleprompter in shot, so you can follow the outline as I go. Chapters
- You've just run a scan
- Who can read it?
- A card for every rule
- The front of a card
- Unfold it
- The fix
- Finding a card
- Who it's for
- Try it today!
Accessibility
Every card works from the keyboard. Its headline is a button that unfolds the card, and the whole face can be pressed with a pointer or a finger. Screen readers hear the headline, whether the card is open or folded, and the open card as a region of its own. Severity, theme and who a rule affects are all written out. The suit colour only repeats them, so nothing depends on seeing it. On a phone the deck is one column and the map unfolds a panel at a time, with no sideways scrolling. Read aloud reads any card to you. What doesn't work yet: we haven't tested it with a screen reader or other assistive technology, only in code review and with axe. We haven't measured the text against the coloured card tops for contrast. Headlines are in a handwritten font, which some people with dyslexia or low vision find harder to read. The PDF you save from a card scored 84/100 on a PDF/UA check, so some of its tags are still wrong. If something gets in your way, tell us.