CodeParkThe first rule of ARIA is: if a native HTML element or attribute already has the meaning and behaviour you need, use it instead of adding ARIA. ARIA (Accessible Rich Internet Applications) is a set of attributes that describe elements to assistive technology, such as screen readers.
For example, a button can take focus, fires on Enter and Space, and is announced as a button. A div role="button" only gets the announcement. You must add tabindex and keyboard handling yourself.
ARIA only changes what appears in the accessibility tree. The accessibility tree is the version of the page that the browser gives to assistive technology. ARIA adds no behaviour and no styling.
ARIA has three kinds of attributes:
- Roles say what something is:
role="tab",role="dialog". - States describe current conditions that change as the user interacts:
aria-expanded,aria-checked,aria-selected. - Properties describe more stable characteristics and relationships:
aria-label,aria-controls,aria-describedby.
Bad ARIA is worse than no ARIA, because it can tell users something false.
- Prefer native HTML elements over ARIA.
- ARIA changes only how an element is described to assistive technology, never how it behaves.
- Roles say what an element is. States are conditions that change. Properties are stable characteristics and relationships.
- Wrong ARIA misleads users, so it is worse than no ARIA.