The Main Areas of WAI-ARIA

ARIA has three main areas that we can utilize:

Roles identify the purpose of an element or component. Using roles, we can revise how browsers expose an element to assistive technology. Many HTML elements have implicit roles, so we do not need to specify them ourselves. For instance, <button> and <main> elements have an implicit role of button and main. Roles such as menu and tab don’t have equivalent HTML elements.

<form id="search" role="search">
  ...
</form>

Properties provide accessibility information about an element that is conveyed to assistive technology via the browser’s accessibility tree. For instance, using aria-describedby on an HTML <input> element, we can associate text that provides additional information to the form field so that a screen reader can announce this to its user.

<div class="form-group">
  <label class="form-label" for="first-name">First Name</label>
  <input class="form-control" id="first-name" name="first-name" type="text" aria-describedby="first-name-description">
  <span id="first-name-description" class="form-description">Just some helpful text related to entering your first name.</span>
</div>

States are for managing the condition of an element. Using aria-pressed="true", we can tell assistive technologies that this toggle button’s current state is pressed.

<button aria-pressed="true">Bold</button>