ARIA stands for Accessible Rich Internet Applications. You may also see it written WAI-ARIA, which stands for Web Accessibility Initiative – Accessible Rich Internet Applications.
ARIA is a set of HTML attributes that let us add information to our elements to be used by assistive devices. Semantic HTML gives us some of this information but ARIA adds more extensive support. They can add context to our elements, help organize them, help clarify visual or popup information—and much more.
ARIA attributes generally convey information about one of three things…
Role
Role attributes help provide context on the purpose of an element. They help the assistive device present information in a way that makes sense. Instead of just conveying to the user that an element is a <nav>, it tells the users that it’s a <nav> that is part of the site’s header. They also help make the site easier to navigate by breaking the site up into sections.
Property
Property attributes provide assistive devices with more information about a given element. These attributes can tell an assistive device, for example, that a specific input is required. Or that a UI element will trigger a popup. These can also be used to create a more optimized experience for assistive devices, by specifying the order or urgency in which visual or contextual information is conveyed to the user.
State
State attributes are similar to property attributes but they focus specifically on things on the page that will change. Let’s look at an example of a State attribute. The aria-checked=“true” attribute indicates to an assistive device that the checkbox element is currently checked. State are important for making dynamic content accessible.
Providing support for assistive devices is a great way to expand your content’s reach. ARIA is a great tool to ensure that you’re providing a well optimized experience for your content across these devices. For more information on ARIA and how to use it, checkout the official W3C documentation.