Apply Aria-Labels and Roles to Buttons and Icons

Buttons and icons serve as interactive elements guiding users through a website's functionalities. However, for users navigating through assistive technologies like screen readers, these elements may lack context without proper labeling. Aria-labels provide descriptive labels for interactive elements, ensuring that all users can navigate and interact with your website seamlessly.

When is it appropriate to utilze aria-labels?

If the label text is available in the DOM (i.e. typically visible text content), authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. There may be instances where the name of an element cannot be determined programmatically from the DOM, and there are cases where referencing DOM content is not the desired user experience. (Source)

How to Add Aria-Labels and Roles in Cornerstone

In each element, you can add aria-labels and role by going to Customize tab and add a Custom Attribute.

  1. Fill Name with aria-label and Value with the label of your button or icon.
  2. Fill Name with role and Value with button or icon.
How to add aria-labels in Cornerstone
How to add role to Cornerstone.
The results adding custom attributes to icon and buttons.

Resources

Published on April 11th, 2024Last updated on April 18th, 2024