What is ARIA?

ARIA stands for Accessible Rich Internet Applications. ARIA is a set of attributes that can be added to HTML markup to communicate with users of assistive technology. When an element has additional ARIA, it usually affects what assistive technology communicates about the element, and it may also affect how certain assistive technology interacts with it.

ARIA is intended to fill information gaps. However, your goal should be to avoid gaps in the first place, which leads to the first rule of ARIA: Don’t use ARIA. If you have a native HTML option, use that first! In building an accessible website or web app, one of the best things you can do is use native HTML when possible.

When you encounter gaps in the current native HTML semantics or when you’re building a custom widget, that is when ARIA should be applied.

For example, imagine you have an interactive element that saves the user’s settings. This element performs an action, so it’s a button. However, you can’t use a native <button> element, so you use a clickable <div> instead.

Users still need to know that the element is a button to understand what it does and how to interact with it, but that role information is missing. Adding the ARIA attribute role="button" fills the information gap and communicates the element's role to users of assistive technology.

ARIA can be used to convey many different details about a component, including its role, name, value, properties, and current state.

ARIA adds information, but it does not add or alter overall function. Adding role="button" to an element doesn’t automatically make it perform an action, adding aria-disabled="true" doesn’t automatically make it inert, and adding aria-expanded="false" doesn’t automatically make it close. The correct functions, states, properties, and values must all be handled by HTML and Javascript — ARIA’s job is only to communicate.

For a deep dive into applying ARIA attributes to custom components, explore the Widgets course from Accessible Web Academy.