ARIA can be broken down into three key components: roles, properties, and states.
ARIA roles
ARIA roles define the purpose and behavior of an HTML element, enabling assistive technologies to interpret and interact with them accurately. When appropriate roles, such as "button," "link," "menu," or "alert," are assigned to relevant elements, screen readers identify them as such. That way, they can introduce them to users who will then understand what they are interacting with.
To help illustrate this, here’s an example of how a tab button would appear in HTML without an ARIA role:
<button>Name of tab</button>
And here’s how it would appear with an ARIA role:
<button role="tab">Name of tab</button>
ARIA properties
ARIA properties provide additional information about an element or modify its behavior. These properties allow developers and website owners to convey specific details that are not apparent from the element in its basic form.
Unlike ARIA roles, which define the overall purpose and behavior of an HTML element, ARIA properties provide additional details and instructions on how the element should be perceived or interacted with.
To help illustrate this, here's an example of an HTML button element without an ARIA property — this HTML element contains only an icon and will simply be announced as “button” by a screen reader:
<button>
<i class="fa fa-search"></i>
</button>
And here's an example of the same button with an ARIA property applied, specifically the "aria-label" property:
<button aria-label="Search">
<i class="fa fa-search"></i>
</button>
With the "aria-label" property in place, assistive technologies, such as screen readers, can accurately convey the purpose of the button.
ARIA states
ARIA states show the current status or behavior of an HTML element. Unlike ARIA roles, which define the purpose and behavior of HTML elements, and ARIA properties, which provide additional details regarding more stable qualities, ARIA states are used to convey qualities that change. An example of this is the "aria-expanded" state, which indicates whether a collapsible section, such as a navigation menu, is currently expanded or collapsed. This allows assistive technologies to notify users about the current state of the section and adapt their browsing experience accordingly.
To help illustrate this, here's an example of an HTML button element without an ARIA state:
<button>Pause</button>
And here's an example of the same button with an ARIA state applied, specifically the "aria-pressed" state:
<button aria-pressed="false">Pause</button>
In this example, the "aria-pressed"state is utilized to indicate whether the button is currently pressed or not. By setting the value of "aria-pressed" to "false," it communicates that the button is in its default unpressed state. When screen readers encounter this ARIA state, they will be able to convey to users with disabilities that the button is currently not pressed, signaling to them that they can change that status if they choose to.
