* - Buttons - Incorrect Use of ARIA Roles on buttons

What the issue is

Incorrect application of ARIA (Accessible Rich Internet Applications) roles to buttons can lead to significant accessibility challenges. For example, a <div> or <span> element being used as a button without an appropriate role="button" attribute fails to convey its function to assistive technology users. Similarly, misuse of ARIA attributes, such as using "aria-pressed" on buttons that do not toggle state, can provide misleading information. These practices hinder the ability of users relying on screen readers and other assistive technologies to understand and interact with web content.

Why this is important

Correct application of ARIA roles and properties is crucial for making web elements accessible, especially for those that do not inherently convey their purpose or state, like custom-styled divs used as buttons. ARIA roles can turn these elements into accessible buttons by explicitly informing assistive technology about their interactive nature. Proper use of ARIA attributes enhances the semantic richness of web content, ensuring users can understand and navigate the site effectively. Misapplication, on the other hand, can lead to confusion and a breakdown in the navigability of a site.

Who it affects

This issue affects:

  1. Users of assistive technologies, such as screen readers, who depend on accurate role and state information to interact with web content.
  2. Users with cognitive disabilities who benefit from clear, semantically meaningful elements to navigate and understand a website.
  3. All users, as the correct use of ARIA roles contributes to a more semantic, structured, and navigable web experience.

How to remediate the issue

  1. Use native HTML <button> elements whenever possible to avoid the need for ARIA roles for basic button functionality.
  2. If using non-native elements as buttons (e.g., <div>, <span>, ensure to correctly apply role="button" and handle keyboard interactions (like Enter and Space keypresses) to mimic native button behavior.
  3. Avoid unnecessary use of ARIA attributes, especially those that do not accurately represent the element's current state or role.
  4. Regularly review the use of ARIA roles and properties in your code to ensure they are used correctly and conform to the current WAI-ARIA best practices.

Guidance on the correct use of ARIA roles and attributes can be found at WCAG Quick Reference on ARIA Roles, States, and Properties.

Ticket category