MakeW3web

WAI-ARIA Roles and Attributes

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a set of guidelines and techniques developed by the W3C to improve the accessibility of web content and applications, particularly for people with disabilities. WAI-ARIA provides a way to add information about the structure, behavior, and presentation of web elements, so that assistive technologies (AT) like screen readers can better understand and interact with them.

WAI-ARIA Roles and Attributes are two key components of the WAI-ARIA specification:

  1. Roles: ARIA roles define the purpose or function of an element within a web page. By assigning an appropriate role to an element, you can provide valuable information to assistive technologies about how that element should be treated. Some common ARIA roles include:
  • `button`: Indicates that the element is a button.
  • `heading`: Indicates that the element is a heading.
  • `navigation`: Indicates that the element contains a collection of navigational links.

Example:

<button role="button">Click me!</button>
<h2 role="heading">Section Title</h2>
<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
  1. Attributes: ARIA attributes provide additional information about an element's state, properties, or relationships with other elements. They can be used in conjunction with roles to further enhance accessibility. Some common ARIA attributes include:
  • `aria-label`: Provides a human-readable label for an element when no visible text label is present.
  • `aria-describedby`: Associates an element with a description provided by another element.
  • `aria-expanded`: Indicates whether a collapsible element, such as a dropdown menu, is currently expanded or collapsed.

Example:

<button role="button" aria-label="Close">X</button>
<input type="text" id="username" aria-describedby="usernameHelp">
<span id="usernameHelp">Enter your username.</span>
<button role="button" aria-expanded="false">Toggle Menu</button>

In this example, the `aria-label` attribute is used to provide a label for a close button that has no visible text. The `aria-describedby` attribute associates the input field with a description provided by the `usernameHelp` element. Finally, the `aria-expanded` attribute indicates the current state of a collapsible menu button.

By using WAI-ARIA Roles and Attributes, you can help ensure that your web content and applications are more accessible to users with disabilities, as well as improve the overall user experience for all users. Remember that ARIA should be used as a supplement to good semantic HTML and not as a replacement for it.

Was this page helpful?