← All terms
Glossary

role attribute

The HTML `role` attribute (defined by ARIA) declares an element's semantic purpose to assistive technology — for example, `role="button"`, `role="navigation"`, or `role="alert"`.

Also: aria roleAlso: html roleAlso: role attribute

Detailed explanation

When native HTML elements are not available or sufficient (e.g., a `<div>` styled as a button), the `role` attribute tells screen readers what the element does. The W3C ARIA specification defines the full role taxonomy: landmark roles (banner, navigation, main, contentinfo), widget roles (button, checkbox, tab, dialog), document roles (article, heading), and live-region roles (alert, status, log).

The first rule of ARIA: do not use ARIA when a native element exists. `<button>` is preferable to `<div role="button">` because the native element brings keyboard handling, focus, and the implicit role for free. ARIA roles override the native semantic — misuse causes more accessibility problems than no ARIA at all.

How this applies to Shopify stores

Shopify themes routinely use `<a>` styled as buttons (cart, "Add to wishlist") without a `role="button"` or, worse, with mismatched roles. AccessComply detects mismatched native-vs-role pairs and flags them.

Primary source: w3.org