Understanding Accessibility with ARIA Properties and Their Usages | by Harikrishnan D | May, 2024

Accessibility is a critical aspect of web development, ensuring that digital content is usable by as many people as possible, including those with disabilities. ARIA (Accessible Rich Internet Applications) properties are designed to enhance the accessibility of web content, particularly for people who rely on assistive technologies like screen readers. This article will delve into ARIA properties, their types, and practical uses to make web applications more accessible.
What is ARIA?

ARIA, or Accessible Rich Internet Applications, is a set of attributes defined by the World Wide Web Consortium (W3C) that can be added to HTML elements to make web content and web applications more accessible to people with disabilities. These attributes provide additional information to assistive technologies, which helps users navigate and interact with web content more effectively.

ARIA properties are categorized into roles, states, and properties:

• Roles: Define the type of element (e.g., button, alert) and its purpose in the context of the web page.
• States: Indicate the current condition of an element (e.g., checked, disabled).
• Properties: Provide additional information about an element (e.g., label, description).

ARIA roles define the function of an element within the context of the web page. Here are some commonly used ARIA roles:

• role=”button”: Identifies an element as a button.

<div role="button">Submit</div>

• role=”alert”: Marks an element as an alert, which should be immediately presented to the user.

<div role="alert">Form submission failed!</div>

• role=”dialog”: Identifies an element as a dialog, which is a window-like component.

<div role="dialog" aria-labelledby="dialogTitle">
<h2 id="dialogTitle">Dialog Title</h2>
<p>Dialog content goes here.</p>
</div>

• role=”navigation”: Indicates a navigation landmark.

<nav role="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

ARIA states communicate dynamic changes in the interface. Some commonly used ARIA states include:

• aria-checked: Indicates whether an element is checked (e.g., in a checkbox or radio button).

<input type="checkbox" aria-checked="false">

• aria-disabled: Indicates that an element is disabled and cannot be interacted with.

<button aria-disabled="true">Submit</button>

• aria-expanded: Indicates whether an element, such as a menu or accordion, is expanded or collapsed.

<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li>Option 1</li>
<li>Option 2</li>
</ul>

• aria-hidden: Hides elements from assistive technologies without removing them from the visual layout.

<div aria-hidden="true">This content is not accessible.</div>

Common ARIA Properties

ARIA properties provide additional semantic information about elements. Here are some frequently used ARIA properties:

• aria-label: Provides an accessible name for an element.

<button aria-label="Close">X</button>

• aria-labelledby: Associates an element with a label element.

<div role="dialog" aria-labelledby="dialogTitle">
<h2 id="dialogTitle">Dialog Title</h2>
</div>

aria-describedby: Associates an element with another element that describes it.

<input type="text" aria-describedby="description">
<div id="description">Enter your full name here.</div>

aria-live: Indicates that an element will be updated, and describes the types of updates (e.g., polite, assertive).

<div aria-live="polite">You have new messages.</div>

Enhancing Form Accessibility

Forms are essential for user interaction on websites. Ensuring they are accessible is crucial:

<form>
<label for="username">Username</label>
<input type="text" id="username" aria-required="true" aria-describedby="usernameHint">
<div id="usernameHint">Enter your username. This is required.</div>
<label for="password">Password</label>
<input type="password" id="password" aria-required="true">
<button type="submit">Submit</button>
</form>

In this example, aria-required=”true” indicates that the username and password fields are mandatory. The aria-describedby property links the username input to a hint, providing additional context.

Making Dynamic Content Accessible

Dynamic content, like alerts or notifications, needs to be announced to screen reader users:

<div aria-live="assertive" role="alert">
Form submission failed. Please try again.
</div>

The aria-live=”assertive” and role=”alert” properties ensure that the alert is promptly communicated to users.

Accessible Navigation

Navigation elements can be made more accessible using ARIA roles:

<nav role="navigation" aria-label="Main Navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

The role=”navigation” and aria-label=”Main Navigation” properties help users understand the purpose and context of the navigation menu.

Conclusion

ARIA properties are powerful tools for enhancing web accessibility. By using appropriate roles, states, and properties, developers can create web content that is not only rich and interactive but also accessible to users with disabilities. Understanding and implementing ARIA attributes is a crucial step towards building an inclusive web.

For more information on ARIA and accessibility practices, consider visiting the W3C ARIA documentation and exploring various resources and tutorials on accessible web development.