When should I use aria-label?

The purpose of the aria-label attribute is to provide an accessible name for interactive elements. Using native elements for their intended purpose is always recommended, so if possible use a native <label> element. However, a native label tag only works for built-in HTML elements, such as <input> or <select>. For custom widgets that can't be labeled by a native <label> element, then it would be appropriate to use the aria-label attribute to provide these interactive components with an accessible name. It would also be appropriate to use the aria-label attribute when interactive elements have an accessible name that isn't accurate.

When UI components have visible labels, also ensure the label text is included in the accessible name, which typically helps users have a better experience with fewer errors.

Note: The aria-label attribute is only "visible" to users of assistive technologies. If any additional information in the aria-label is significant enough to include for users of assistive technology, consider making it visible for all users.

For a deeper dive into creating accessible names and other accessibility features for interactive elements, explore the Forms: Labels, Cues, and Errors course or the full Accessibility for Developers Bundle from Accessible Web Academy.