sajad torkamani

In a nutshell

ARIA (Accessible Rich Internet Applications) is the Web Accessibility Initiative‘s specification that defines a standard set of HTML attributes that can help assistive technologies translate custom HTML elements into meaningful nodes in an accessibility tree.

For example, the following custom checkbox:

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

can be made more accessible by adding some standardized ARIA attributes:

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

Thanks to these attributes, a screen reader can correctly report the element as a checkbox.

What is ARIA?

What is an ARIA role?

The ARIA spec defines several roles that can be used to describe the semantic meaning of a HTML element. Each role has a specific set of properties, and those properties can have specific states. For example, there’s a button role that can have the following properties:

  • aria-label
  • aria-pressed
  • aria-hidden
  • aria-controls

Examples of other roles

  • alert
  • button
  • checkbox
  • dialog
  • figure
  • form
  • input
  • switch

See the ARIA spec for full list of available roles.

Other notes

  • Screen readers typically know how to translate native HTML elements into accessible equivalents so there’s often no need to define ARIA attributes on native elements like <input type="checkbox" />
  • Aria only modifies the accessibility tree, not the presentation or behavior of elements.
  • Learn to use Chrome’s accessibility voice-over feature.
  • You can use Chrome’s Lighthouse feature to assess the accessibility of your web pages.
  • Look into whether there any other tools you can use to measure accessibility.

Sources

Tagged: Misc

Leave a comment

Your email address will not be published. Required fields are marked *