Accessibility Glossary

Use <details>/<summary> or button + aria-expanded + aria-controls. Arrow keys optional. Content panel must be associated with its trigger.

Use nav with aria-label='Breadcrumb', an ordered list, and aria-current='page' on the last item. Separators should be decorative (CSS or aria-hidden). Helps orientation for all users.

Provide pause/stop controls. Support keyboard navigation (arrows for slides). Role='group' on each slide with aria-roledescription='slide'. Auto-rotation must respect prefers-reduced-motion.

A text input with a popup list of options. One of the hardest ARIA patterns: role='combobox' + aria-expanded + aria-activedescendant + listbox. Broken implementations are everywhere — test with screen readers.

Use <th> with scope='col'/'row'. Add <caption> or aria-labelledby. Never use tables for layout. Only 19% of observed tables had valid markup in the 2026 WebAIM Million.

Charts and graphs need a text alternative — a short summary, a data table, or both. Don't tell data series apart by color alone; add labels, patterns, or direct annotations. Bars, lines, and segments must meet 3:1 non-text contrast.

Notoriously inaccessible. Must support keyboard navigation (arrow keys for days, page up/down for months). Always provide a text input alternative. Native <input type='date'> is often the best option.

Focus trap inside, Escape to close, focus returns to trigger on dismiss. Use <dialog> or role='dialog' + aria-modal='true'. One of the most commonly broken patterns.

Every input needs a visible, programmatically associated <label for='id'>. Placeholder is not a label. Found missing on 49% of homepages. The second most common WCAG failure after contrast.

Inputs collecting personal data (name, email, address, credit card) must have autocomplete attributes. Helps autofill and assistive tech identify fields: autocomplete='email', 'given-name', etc.

Hamburger menus need: button trigger (not div) with aria-expanded, focus trap when open, Escape to close, focus returns to trigger. Content behind the menu should be inert when open.

Wrap in nav with aria-label='Pagination'. Mark current page with aria-current='page'. Use meaningful link text ('Page 3') not just numbers. Previous/Next need clear labels, not just arrows.

role='tablist' → role='tab' → role='tabpanel'. Arrow keys move between tabs, Tab moves into the panel. aria-selected on active tab. One of the trickiest ARIA patterns to get right.

Transient messages must use role='status' or aria-live='polite' so screen readers announce them. Must not auto-dismiss too quickly (<5s minimum). Must be dismissible. Must not steal focus from the user's task.

Must be triggerable by focus (not just hover). Dismissible with Escape. Persistent while hovering over it. Use aria-describedby to associate with trigger. Avoid for critical information.

All controls keyboard-accessible. Captions toggle visible and labeled. Volume, play/pause, seek, fullscreen all need accessible names. Captions must be synchronized. Provide transcript link nearby.