pelicin › web › HTML

ARIA HTML Attributes

ARIA was created based on HTML4 specification. Many of the "widgets" defined in ARIA were later incorporated into HTML5.

For such elements where the semantically correct HTML5 elements exists, developers should use them over AIRA.

ARIA (Accessible Rich Internet Applications) is a set of attributes intended to make web content and web applications more accessible to people with disabilities.

Types of ARIA attributes

The ARIA specification is split up into three different types of attributes:

  • Role attributes — describe widgets that aren't otherwise available in HTML4 (e.g. sliders, menu bars, tabs, and dialogs)
  • Property attributes — describe characteristics of these widgets (e.g. if they are draggable, have a required element, or have a popup associated with them)
  • State attributes — describe the current interaction state of an element (e.g. busy, disabled, selected, or hidden).

Using ARIA

Just use role=[...] from any of the non-italicized class name below. (Right-click and select "View Image" to see the image larger.)

The italicized class names are called abstract roles; they are the base classes from which state attributes and property attributes can be inherited. They should not appear on your HTML.

ARIA role class diagram
ARIA role class diagram (Source: w3.org)

Here's an example from MDN.

<!-- Now *these* are Tabs! -->
<!-- We've added role attributes to describe the tab list and each tab. -->
<ol role="tablist">
  <li id="ch1Tab" role="tab">
    <a href="#ch1Panel">Chapter 1</a>
  </li>
  <li id="ch2Tab" role="tab">
    <a href="#ch2Panel">Chapter 2</a>
  </li>
  <li id="quizTab" role="tab">
    <a href="#quizPanel">Quiz</a>
  </li>
</ol>

<div>
  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div>
</div>

For more information on what each role/property/state attribute means, you can consult this resource. Just search for:

  • [roleName] (role) (e.g. tab (role)) — to look for the description for the role, as well as state and property attributes in can take
  • [name] (property) (e.g. aria-labelledby (role)) — to look for the description on a property attribute
  • [name] (state) (e.g. aria-current (state)) — to look for the description on a state attribute

References