Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
html5
communitycreator

What is ARIA in HTML?

Theodore Kelechukwu Onyejiaku

Overview

ARIA is an acronym that stands for Accessible Rich Internet Applications.

ARIA was developed to help people with disabilities access web applications and content in a better and more understandable way.

ARIA helps provide additional information about the semantics of various elements of a web page to assistive technologies, such as screen readers.

ARIA comes as a form of attributes in HTML elements, as shown below:

<!-- An "ul" element with ARIA role as menubar
      and "li" as menuitem
 -->
<ul role="menubar">
  <li role="menuitem">Home</li>
  <li role="menuitem">About</li>
  <li role="menuitem">FAQ</li>
</ul>

In the example above, assistive technology (a screen reader, for example) interprets ul as a menu and reads it aloud with enough information that the end-user (typically someone with a disability) can understand.

Three ways to use ARIA

As noted earlier, ARIA is a form of attributes in an HTML element.

There are three ways in which ARIA can be used as attributes on HTML elements:

  • Roles
  • States
  • Properties

ARIA as roles

Roles define a type of user interface (UI) element (e.g., role=“ROLE_NAME”). Once a role is set, it does not change.

Examples are shown below:

<!-- using aria role on a button -->
<button role="button">Click me</button>

<!-- using aria on a heading -->
<h1 role="heading">This is a heading</h1>

<!-- using aria on an image -->
<img role="img" src="image-source" alt="aria"/>

From the example above, we can see that ARIA can be used as role and can have values such as img, document, heading, list, listitem, etc., depending on the element to which it is applied.

ARIA as states and properties

States and properties are applied to elements and used to support ARIA roles that exist on a page.

States can change independently or with user interaction (i.e. aria-checked and aria-disabled), usually with JavaScript.

See the example below:

<!-- accessible name: send email -->
<button aria-label="send email">send</button>

<!-- accessible name: Your name -->
<input aria-label="Your name" type="text" name="name" placeholder="What's your name?"/>

Other commonly used ARIA states and properties include the following:

  • ria-describedby
  • aria-haspopup
  • aria-hidden
  • aria-label
  • aria-labelledby

RELATED TAGS

html
html5
communitycreator

CONTRIBUTOR

Theodore Kelechukwu Onyejiaku
RELATED COURSES

View all Courses

Keep Exploring