Skip to main content

What are the main types of ARIA attributes?

HTMLJunior~2 min read
Suggest an edit

The WAI-ARIA (Accessible Rich Internet Applications) specification defines three main types of attributes, each responsible for its own role in making an interface accessible. They help screen readers and other assistive technologies understand the meaning, state, and relationships of elements.

1. Roles - define what kind of element this is

A role tells you what function an element performs: a button, a tab, a dialog, a menu, a list, and so on. This matters especially when custom markup uses <div> or <span> instead of native HTML tags.

Examples:

html
<div role="button">Submit</div> <div role="dialog">...</div> <ul role="listbox"> <li role="option">Warsaw</li> </ul>

Examples of common roles:

  • role="button": a button
  • role="link": a link
  • role="checkbox": a checkbox
  • role="dialog": a modal window
  • role="menu" / role="menuitem": a navigation menu
  • role="alert": an important notification

2. States - describe the element's current state

These attributes are dynamic: their values can change as the interface is used. They tell the user what is happening right now: whether an element is active, expanded, selected, and so on.

Examples:

html
<button aria-pressed="true">Favorite</button> <div aria-expanded="false">Menu</div> <li aria-selected="true">Warsaw</li> <input type="checkbox" aria-checked="false">

Commonly used states:

  • aria-checked: whether a checkbox is checked
  • aria-expanded: whether an element is expanded (accordion, menu)
  • aria-pressed: whether a toggle button is pressed
  • aria-selected: whether an item is selected
  • aria-hidden: whether an element is hidden from screen readers

3. Properties - describe the characteristics and relationships of elements

These attributes do not depend on state; they provide additional information: descriptions, relationships, roles, groups. They can be used to "link" elements to each other, add text explanations, and provide context.

Examples:

html
<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-text"> <h2 id="dialog-title">Confirmation</h2> <p id="dialog-text">Are you sure you want to delete the file?</p> </div>

Commonly used properties:

  • aria-label: a short text description of an element
  • aria-labelledby: links an element to a heading (by id)
  • aria-describedby: links an element to a description
  • aria-controls: indicates which element this one controls
  • aria-live: announces that the content inside updates dynamically (for example, chat messages)

4. (bonus) ARIA Live Region attributes

Used for dynamic updates to content, when the user needs to be notified of new changes without reloading the page. Example:

html
<div aria-live="polite">Loading complete</div>

Values:

  • off: the screen reader does not announce changes;
  • polite: it announces once the user finishes the current action;
  • assertive: it announces immediately (for errors and warnings).

Summary table:

TypeWhat it doesExamples
roleDefines the type of the elementrole="button", role="dialog"
stateShows the element's current statearia-checked, aria-expanded, aria-selected
propertyAdds description, context, and relationshipsaria-label, aria-labelledby, aria-describedby, aria-controls

Conclusion:

ARIA attributes come in three types:

  1. Roles (role): who this is;
  2. States (aria-* state): what is happening right now;
  3. Properties (aria-* property): what relationships and descriptions exist.

Together, they make an interface understandable for screen readers, accessible by keyboard, and compliant with WCAG standards.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit