Getting Started
How to use a11y examples and the predicted semantics explorer
What is a11y examples?
a11y examples is an interactive showcase of accessible component patterns. Each component page presents side-by-side “inaccessible” and “accessible” implementations with live code previews and a built-in predicted semantics explorer.
How to Use Example Pages
Each example page shows common UI patterns implemented two ways:
- Inaccessible version — the common mistake developers make, with explanations of what’s wrong
- Accessible version — the correct implementation following WAI-ARIA Authoring Practices
Both versions include syntax-highlighted code and a live preview you can interact with.
Using the Predicted Semantics Explorer
Open “Explore predicted semantics” on a live preview to inspect the roles, names, states, and relationships the teaching tool derives from that small HTML example. Its voice preview is generated speech, not NVDA, JAWS, VoiceOver, or TalkBack output. Use the testing guide for real assistive-technology testing.
Semantic navigation
- ↑ / ↓ — Move to the previous/next element
- H — Jump to the next heading
- K — Jump to the next link
- B — Jump to the next button
- F — Jump to the next form field
- D — Jump to the next landmark
- 1–6 — Jump to the next heading of that level
- Enter — Activate the current element
- R — Open the Rotor (element list)
- Escape — Exit the explorer
Preview keyboard test
Use the separate preview keyboard control to move real browser focus through the rendered example. This is different from moving through predicted semantic nodes:
- Tab / Shift+Tab — Move between interactive elements
- Arrow keys — Interact within the element (e.g., select options)
- Escape — Return to semantic navigation
The explorer is intentionally incomplete. Exact speech, braille, virtual-cursor navigation, mode changes, live-region delivery, and platform accessibility mappings require tests with real assistive technology.
Recommended Learning Path
Start with the simplest patterns and work up to more complex ones:
- Buttons — semantic HTML basics
- Forms — labels, errors, and fieldsets
- Accordions — expandable sections with state
- Tabs — roving tabindex and panel association
- Navigation — disclosure pattern and landmarks
- Modals — focus trapping and dialog roles
- Live Regions — dynamic announcements
- Skip Links — page structure shortcuts