:::
ARIA Patterns for Developers: Use Native HTML First
ARIA can add semantics for complex components, but bad ARIA is worse. Use W3C APG Patterns for tabs, dialogs, accordions, menu buttons, and related widgets.
Summary
- No ARIA is better than Bad ARIA.
- Use native HTML first, and add ARIA only when native semantics are not enough.
- When following APG Patterns, implement keyboard behavior, focus management, and state updates together.
Do not copy only the role
ARIA changes semantics exposed to assistive technologies. It does not add keyboard behavior. role="button" does not make a div support Enter or Space automatically.
Recommended practice
Start with the W3C APG Patterns, then confirm keyboard behavior, focus, name, role, and state all match the real interaction.
Related pages
- Accesserty DevCheck
Run browser-based checks on local builds, staging pages, authenticated screens, and interactive states.
- ARIA glossary page
- Accesserty UI Kit