WAI-ARIA stands for Web Accessibility Initiative - Accessible Rich Internet Applications, a set of technical standards designed to make the web more accessible to people from various backgrounds. It primarily aims to improve accessibility for people who use screen readers or rely solely on keyboards, making the web more interactive and accessible.

Attributes defined under WAI ARIA are known as ‘WAI ARIA attributes’ or ‘ARIA attributes.’ There are three main types of ARIA attributes: ‘Role,’ ‘State,’ and ‘Properties.’

Role

The Role attribute is used to convey the meaning or role of a specific element to assistive technologies.Where attributes overlap with the semantics of HTML, semantic HTML should be used. There are primarily six types of Role attributes:

Document structure roles

These describe the structure of the content. Many are already available in HTML, and using semantic HTML wherever possible is recommended.

・toolbar

・tooltip

・feed

Widget roles

These define interactive UI patterns and clarify the role of interactive elements.

・tab

・scrollbar

・slider

Although some elements, like button and checkbox, already have semantics provided by HTML elements, it’s generally better not to use them if possible.

There are also composite roles that combine multiple roles.

・combobox

・menu

・tablist

Landmark roles

Used to aid navigation within a page, these roles identify the main parts of a page and make it easier for assistive technology users to navigate.

・banner

・navigation

・main

・complementary

・form

・search

・contentinfo

Live region roles

Used to notify users about dynamically changing content.

・alert

・log

・status

・marquee

・timer

These roles inform of updates, ensuring users don’t miss important information.

Window roles

Used to define parts of an application window, such as pop-ups and dialog boxes.

・dialog

・alertdialog

Abstract roles

Intended solely for organizing and optimizing documents by the browser. Not meant for use by developers writing HTML markup.

State

Represents the current state of a component. It’s crucial for informing assistive technologies of state changes to ensure users are notified.

・aria-checked

・aria-disabled

・aria-expanded

Properties

Provide additional information about elements on a web page, informing assistive technologies how they should behave. These properties define the state or characteristics of elements, improving the accessibility of the user interface.

・aria-required

・aria-label

・aria-controls