Section D
About diagona11y
diagona11y exists because most accessibility advice is abstract. WCAG tells you the rule. MDN tells you the API. Stack Overflow tells you the hack. We're trying to do the missing thing — show you the working pattern, the screen-reader transcript, and the broken version side by side, so you can copy the right thing without reading three specs first.
Who's behind it
diagona11y is a one-person side project under Strands. It exists because most accessibility advice is abstract and I kept rewriting the same patterns from scratch each time I needed them.
Every pattern goes through the methodology checklist below before it gets a reviewed badge. Anything still missing transcripts, anti-pattern coverage, or an automated audit stays in draft until it's done. If you're a screen-reader user willing to sanity-check transcripts, please get in touch — see Contact.
Testing methodology
Each pattern is run through this checklist before it's marked reviewed in the source. Patterns still in draft have not yet completed it.
- Native semantic element used wherever one exists (no ARIA-on-a-div)
- All interactive controls reachable by keyboard with a visible focus ring
- Hit areas at least 24×24 CSS pixels (44×44 noted where AAA needs it)
- Each control has an accessible name (label, aria-label, or aria-labelledby)
- State changes (selected, expanded, pressed, invalid) are announced
- Error messages, hints, and other description text linked via aria-describedby
- Operates with VoiceOver (macOS Safari + iOS Safari)
- Operates with NVDA (Windows Firefox + Chrome)
- Operates with JAWS (Windows Chrome) — for components common in enterprise software
- Operates with TalkBack (Android Chrome) for touch-driven patterns
- Anti-pattern documented with axe-core failures named where applicable
- WCAG 2.2 SCs identified and linked in the page footer
- No reliance on colour alone to convey meaning
- Animations respect prefers-reduced-motion
- Sample code is the simplest possible — no library required
What we test with
| Tool | Version | What we use it for |
|---|---|---|
| axe-core | 4.11 | Automated rule scanning in the Playground and during pattern review. |
| VoiceOver | macOS 14+ / iOS 17+ | Primary screen reader for transcripts. |
| NVDA | 2024.x | Cross-checked on Firefox + Chrome on Windows 11. |
| JAWS | 2025 | Spot-checks for enterprise-leaning patterns (data table, tabs, modal). |
| TalkBack | Android 14 | Touch-only patterns and gesture interactions. |
A note about the audio
Each transcript row has an optional play button that voices the screen-reader announcement as a narrator reading it aloud — not a literal recording of any specific screen reader. The voice is consistent across the site so the experience is predictable, and the transcripts themselves are based on VoiceOver on macOS Safari.
Real screen-reader output varies by reader, browser, OS, and version: the same DOM produces different phrasing under NVDA, JAWS, TalkBack, and VoiceOver. The audio is here to give a sense of pace and emphasis — not to substitute for verifying with your own screen reader.
Pattern statuses
Every pattern shows a status badge in its header. They mean exactly what they say:
- Draft
- The page exists. Content may be incomplete. Has not been through the methodology checklist. Treat as a sketch.
- Reviewed
- Run end-to-end against the methodology checklist on the screen readers and browsers listed below. Anti-pattern documented, transcript written, axe-core clean. Safe to copy.
- Published
- Reviewed plus a verified screen-reader transcript with audio. The bar for the most stable patterns.
Known gaps
We'd rather call out what we haven't covered than imply it's all solved. Currently:
- Patterns have not been verified in JAWS + Edge.
- Screen-reader transcripts are VoiceOver-only at the moment. NVDA and JAWS phrasing differs and we plan to add a toggle to swap.
- Audio recordings of the transcripts are not yet shipping — text only for now.
- Right-to-left languages (Arabic, Hebrew) are documented in CSS via logical properties but not yet end-to-end tested.
- The Playground audits server-rendered HTML only; client-rendered SPA routes are not currently in scope.
If one of these is blocking you and you'd like to help close it, the contributing section below is the way in.
Contact
Spotted something wrong, or want a pattern adding? Drop a note to hello@diagona11y.com. One person reads everything; replies usually within a few days.