Accessible Interface Pattern Checklist
Keyboard, focus, and semantic requirements for common browser interface patterns.
Keyboard, focus, and semantic requirements for common browser interface patterns. Each row includes a practical application and a failure to check before using it.
Use it when
- Check an interface before shipping it.
- Choose native browser elements before adding custom behavior.
Watch out for
- This checklist does not replace testing with users and assistive technology.
- ARIA roles do not implement behavior by themselves.
The data
10 rows
| Pattern | Semantic start | Keyboard behavior | Common failure |
|---|---|---|---|
| Search form | label plus input type=search and button | Enter submits; the label identifies the field. | Using only placeholder text as the accessible name. |
| Modal dialog | dialog with showModal and a visible title | Escape closes; focus returns to the opener. | Keyboard focus escapes behind the modal. |
| Disclosure | details and summary | Enter or Space toggles the summary. | Building a clickable div without keyboard behavior. |
| Navigation | nav containing real links | Tab follows the document order. | Using menu roles for ordinary website navigation. |
| Tabs | tablist, tab, and tabpanel | Arrow keys change the selected tab under the chosen activation policy. | Adding roles without implementing keyboard behavior. |
| Data table | table with th scope=col or row | Links and controls remain reachable; wide data may scroll. | Replacing table semantics with a visual grid of divs. |
| Copy action | button with an accessible name | Enter or Space activates; announce success or failure. | Showing Copied even when the clipboard write failed. |
| Validation error | Associated text and aria-invalid | Focus stays predictable; errors describe a correction. | Relying on a red border alone. |
| Reduced motion | prefers-reduced-motion media query | All actions still work when transitions are removed. | Hiding information with an animation that no longer runs. |
| Mobile navigation | Disclosure button with aria-expanded | Escape closes; focus order stays usable. | Leaving a hidden drawer’s links focusable. |
Fields
The shape of this dataset, read from the data itself: every column, its type and a real value. Agents can use this to plan a query without fetching the whole document.
| Section | Field | Type | Example |
|---|---|---|---|
| data | pattern | string | Search form |
| data | semantic_start | string | label plus input type=search and button |
| data | keyboard_behavior | string | Enter submits; the label identifies the field. |
| data | common_failure | string | Using only placeholder text as the accessible n… |
Fetch the same bytes
The static files contain the same reference rows as the API, with no API rate limit. Live metadata, such as view counts, may differ. Use the API for content negotiation; use the static files for a cacheable snapshot.
curl "https://yjtoon.com/api/dataset/web-accessibility-patterns?format=toon"
const res = await fetch( "https://yjtoon.com/static-data/dataset/web-accessibility-patterns.toon" ); const toon = await res.text();
Rate limit: 120 requests per minute per IP, no key and no signup. API reference →
Sources and editorial notes
Original editorial reference notes by YJTOON, informed by the linked primary documentation. External specifications retain their own licenses.
Editorial review: . Source documents keep their own licenses.