ARIA Patterns

Accessible Rich Internet Applications — recipes for screen-reader–friendly UI.

Disclosure

Use aria-expanded on the trigger and aria-controls pointing to the collapsible region. Toggle hidden on the panel; never rely on CSS alone.

Tabs

Wrap tabs in a role="tablist", each trigger gets role="tab" witharia-selected. Panels userole="tabpanel" andaria-labelledby referencing the tab id. Arrow-key navigation is expected.

Dialog (Modal)

role="dialog" witharia-modal="true". Trap focus inside, label with aria-labelledby, and restore focus on close. The backdrop must be inert.

Live Regions

aria-live="polite" for non-urgent updates, assertive for immediate announcements. Pair with aria-atomicto control whether the full region or only changes are read.