Design System Glossary

WAI-ARIA

WAI-ARIA (Accessible Rich Internet Applications) is the W3C spec for adding accessibility semantics to custom components — roles (role="dialog"), states (aria-expanded), and properties (aria-label) — when native HTML elements aren't sufficient. For a design system building tabs, dialogs, comboboxes or menus, WAI-ARIA is unavoidable.

The first rule of ARIA is don't use ARIA: prefer the native element if one exists. The second is to follow the ARIA Authoring Practices Guide patterns rather than inventing your own — they're the implementation reference for every well-known design system. Headless component libraries like Radix and React Aria handle most ARIA correctly out of the box, which is one strong argument for adopting them.