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 screen reader emulator.

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 Screen Reader Emulator

Click the “Try with Screen Reader” button on any live preview to activate the emulator. The emulator simulates how NVDA (a popular free screen reader) would interpret and announce the content.

Browse Mode (default)

• ↑ / ↓ — 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 emulator

Focus Mode

Focus mode activates automatically when you enter a form field. In this mode:

• Tab / Shift+Tab — Move between interactive elements
• Arrow keys — Interact within the element (e.g., select options)
• Escape — Return to browse mode

Recommended Learning Path

Start with the simplest patterns and work up to more complex ones:

1. Buttons — semantic HTML basics
2. Forms — labels, errors, and fieldsets
3. Accordions — expandable sections with state
4. Tabs — roving tabindex and panel association
5. Navigation — disclosure pattern and landmarks
6. Modals — focus trapping and dialog roles
7. Live Regions — dynamic announcements
8. Skip Links — page structure shortcuts