arialabels

aria-labels refer to the ARIA attribute aria-label, used in HTML to provide an accessible name for an element. It is part of the Accessible Rich Internet Applications (ARIA) specification and helps assistive technologies, such as screen readers, identify controls when visible text is absent. The attribute conveys a textual label that is announced by assistive technologies regardless of what is visually shown.

The aria-label attribute takes a string value that represents the element’s label. For example: <button aria-label="Submit">Submit</button> or <div role="button" aria-label="Play"></div>. It can be used on interactive elements and on some non-interactive ones, but it should be applied judiciously. When an element has both visible text and an aria-label, the aria-label defines the accessible name, which can overshadow the visible label; in such cases using aria-labelledby to reference a visible label is often preferred.

In practice, aria-label is most useful for controls that rely on icons or graphical elements without text, or in custom widgets where native labeling is not sufficient. It is generally recommended to prefer real labels in the page markup or to use aria-labelledby to link to visible text, reserving aria-label for cases where no visible label exists.

Testing and considerations: ensure that the label clearly communicates the element’s purpose, keep labels concise, and verify behavior with assistive technologies. Avoid relying on color or icon alone to convey meaning, and ensure dynamic updates are announced when the label changes.