Skip to main content

ARIA

ARIA (Accessible Rich Internet Applications) is a set of rules. They make web content easier to use for people with disabilities.

Every browser follows these rules. Assistive technology devices then use them.

aria-structure

Role

For every HTML element, there is a role defined. The list of possible roles are defined by ARIA.

The page developer can set the role by hand. If not, the browser works it out. It does this while it builds the accessibility tree.

Accessible Name

For each accessible HTML element, the browser also works out a name. This name is unique within the accessible tree of the page.

The developer can also set names with the label or aria-label attributes. The browser then uses them while it builds the tree.

Accessible Elements

Not all HTML elements in the DOM are accessible by default. For example, a span or a div has no meaning on its own. You must add details to it. We use ARIA attributes to attach those details.

Instead, you can use semantic elements. These include header, main, article, img, p, and section. They're accessible right away. Their purpose is already clear.

accessibility isn't about interacting

Here, accessibility means an accessibility device can understand the element. It doesn't mean the element can be clicked.