extends with roles and attributes (such as role or aria-label) that give assistive technologies extra information. It is most useful for complex components that have no suitable native element, for example:
- tabs,
- modals and dialogs,
- accordions and dynamic menus.
The first rule of ARIA, however, is: if a native HTML element already provides the required meaning and behaviour, use it instead of rebuilding it with ARIA. In short: native HTML first, then ARIA.
Many ARIA declarations are also redundant. A <nav> already has its role implicitly, so an additional role="navigation" is usually unnecessary. When ARIA is used, keyboard operation and focus management must be implemented correctly as well.
The first rule of ARIA #
Prefer native HTML semantics. A real <button>, <nav> or <dialog> brings keyboard behaviour and roles for free; ARIA attributes only paper over markup that chose the wrong element. Badly applied ARIA is worse than none, because it announces behaviour that does not exist.
Where ARIA helps SEO and AI readability #
Attributes like aria-label give text-less controls an accessible name — the same name crawlers use to understand icon links (a logo link labelled "RankScan" counts as ). and labels also help machine readers segment a page, which benefits assistive technology and content extraction alike.