aria-patterns

---
name: aria-patterns
description: >
license: MIT
---

# ARIA Accessible Component Patterns

This skill provides deep, practical knowledge about accessible UI component patterns based on the [WAI-ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/).

## Why this skill exists

LLMs already know the ARIA spec reasonably well. What they often get wrong is the **gap between spec and reality**:

- `role="tooltip"` has **3/33 MUST support** on a11ysupport.io — it's essentially dead
- `aria-modal="true"` is **not supported** by TalkBack, Narrator, or Orca — your modal isn't actually modal
- `aria-autocomplete` has **11/55 MUST support** — screen readers mostly ignore it
- `aria-errormessage` has **~20% MUST support** — designed for form errors but AT ignores it; use `aria-describedby` instead
- `aria-relevant` is **completely broken for ANY non-default value** — `"additions"` alone has 0/11 full support (NVDA ZERO on all browsers — stops announcing entirely); `"text"` alone also 0/11 (Narrator, VoiceOver iOS/macOS = none); `"removals"` 2/11 (VoiceOver only); the default `"additions text"` is the ONLY value that works (11/11)
- `aria-controls` navigation works **only in JAWS** — other screen readers don't expose it
- `role="menu"` is for **application commands, not site navigation** — this is the #1 ARIA misuse
- `aria-busy="true"` is supposed to suppress live region updates but **only JAWS supports it** — every other screen reader ignores it
- `aria-live="assertive"` does **NOT interrupt** in JAWS — the most-used desktop screen reader queues it instead
- `aria-details` has **7/11 MUST support** — VoiceOver (macOS + iOS), Narrator, and TalkBack completely ignore it; use `aria-describedby` as primary link to descriptions
- `aria-activedescendant` is **completely unsupported for combobox on VoiceOver macOS/Safari** — it works for menus but combobox options are invisible; use DOM focus (roving tabindex) instead
- `aria-current` has **ZERO support on Narrator and Orca** — the attribute recommended for breadcrumbs, step indicators, and nav is invisible to Windows built-in and Linux screen readers; dynamic state changes only announced by NVDA and VoiceOver iOS
- `aria-pressed="mixed"` has **near-zero support** — only JAWS (Chrome/Firefox) and VoiceOver macOS convey the tri-state; NVDA, Narrator, Orca, TalkBack, VoiceOver iOS all ignore it
- `aria-sort` dynamic changes are announced by **only NVDA+Firefox (1/11 combos)** — when a user clicks a column header to change sort direction, JAWS, Narrator, VoiceOver (all platforms), Orca, and TalkBack are all silent; Orca and TalkBack can't even read static ascending/descending values
- `aria-colcount="-1"` (unknown column count) is **broken in ALL screen readers (0/11)** — every AT ignores the spec's MUST NOT and announces its own calculated count, misleading users; VoiceOver (macOS + iOS) and TalkBack don't support `aria-colcount` at all
- `aria-flowto` has **10/44 MUST support (23%)** — only JAWS supports alternate reading order navigation; NVDA, VoiceOver, TalkBack, Narrator, and Orca completely ignore it, making it useless for defining multi-column or complex layout reading paths
- `aria-level` above 6 has **ZERO support in JAWS (all browsers) and TalkBack** — only 4/11 combos fully support heading levels >6; JAWS announces "heading" with no level number; restructure headings to stay within 1–6 or encode depth context in the accessible name

This skill provides the AT support reality data that prevents developers from shipping components that work in theory but fail for real screen reader users.

## How to use this skill

1. Read the reference file for the pattern the user needs
2. **Always check `references/at-support-gotchas.md`** for cross-cutting AT support issues — this file contains the most critical knowledge that other sources miss
3. **Check `references/live-regions.md`** whenever the user's component involves dynamic content updates, notifications, or status messages — live region behavior is deeply unintuitive
4. **Check `references/form-validation.md`** whenever the user is implementing form validation, error handling, or required field patterns — `aria-errormessage` is deceptively broken
5. Adapt to the user's context (framework, building vs auditing, testing)

When the user asks about a pattern, prioritize AT support reality over idealized spec behavior. If a feature has known support gaps, say so explicitly and provide workarounds.

## Available patterns

| Pattern | Reference file | Key AT insight |
|---------|---------------|----------------|
| Accordion | `references/accordion.md` | Well-supported; heading structure is the critical factor |
| Checkbox | `references/checkbox.md` | Native recommended; tri-state has nuanced AT behavior |
| Combobox | `references/combobox.md` | `aria-autocomplete` is nearly unsupported — use live regions |
| Dialog (Modal) | `references/dialog.md` | `aria-modal` fails in 3+ screen readers — use `inert` or native `<dialog>` |
| Menu and Menubar | `references/menu.md` | **NOT for site navigation** — only for app-style commands |
| Switch | `references/switch.md` | Falls back to "checkbox" in many screen readers |
| Tabs | `references/tabs.md` | Automatic activation recommended; Tab key goes to panel, NOT next tab |
| Tooltip | `references/tooltip.md` | `role="tooltip"` is essentially dead — rely on `aria-describedby`/`aria-labelledby` |

### Cross-cutting reference

| Reference | File | Content |
|-----------|------|---------|
| AT Support Gotchas | `references/at-support-gotchas.md` | Critical ARIA features with broken AT support, workarounds, and testing recommendations |
| Live Regions | `references/live-regions.md` | aria-busy broken everywhere except JAWS, assertive doesn't interrupt in JAWS, DOM-first rule, debouncing |
| Form Validation | `references/form-validation.md` | aria-errormessage barely works — use aria-describedby; group/radiogroup mobile gaps; DOM-first rule for alerts |

## Reference file structure

Each reference file follows the same structure:

1. **Identity** — what makes a component this pattern (and what doesn't), with a comparison table against similar patterns
2. **Variants** — behavioral differences between sub-types
3. **Anatomy & markup** — required HTML structure and ARIA attributes, with code for both native and custom implementations
4. **Keyboard interaction** — every key the component must respond to, organized as required vs. optional
5. **State management** — how ARIA states change in response to user interaction, with state transition rules
6. **Screen reader expectations** — what semantic information must be conveyed, acknowledging differences across screen readers
7. **Implementation guide** — practical guidance for building the component correctly, with native-first approach
8. **Common mistakes** — frequent accessibility failures and how to fix them
9. **Acceptance criteria** — concise, verifiable checklist for auditing, organized by severity

## General principles

### Prefer native HTML (First Rule of ARIA)

Use native HTML elements whenever they provide the needed semantics. A `<button>` is always preferable to a `<div role="button">`. Only reach for ARIA when no native element can achieve the result.

### Spec vs reality

The ARIA spec defines what SHOULD happen. Real AT support determines what DOES happen. When this skill flags a support gap, take it seriously — millions of users depend on screen readers that may not implement the spec correctly. Always provide fallbacks for features with known gaps.

### Screen reader announcements are semantic, not verbatim

When this skill describes what a screen reader should announce, it refers to the semantic information that must be conveyed — not the exact words. NVDA, JAWS, VoiceOver, and TalkBack each phrase things differently, but the underlying meaning must be present.

### Severity levels

- **Critical** — Failure makes the component unusable for AT users. Must be resolved.
- **Major** — Failure significantly degrades the experience. Should be resolved.
- **Minor** — Usability inconvenience. Resolve when possible.