arialabel

aria-label is an HTML attribute defined by the WAI-ARIA specification that provides an accessible name for an element. It is used to communicate the purpose or function of user interface controls to assistive technologies, particularly when there is no visible label or when the visible label does not convey the intended meaning. The attribute does not alter the element’s visual appearance; it only affects how screen readers and other assistive technologies describe the control.

Usage and syntax: The value of aria-label is a concise string. Example: a button with no visible text can be labeled for screen readers as "Close" using: <button aria-label="Close">X</button>. If there is visible text or a label elsewhere, aria-label should be used sparingly; for elements with existing visible labels, aria-labelledby is often preferred to reference that visible text. If both aria-label and aria-labelledby are present, the accessible name is derived from aria-labelledby.

Relationship to other labeling: For forms and controls with a native label element, the label element should be used; aria-label is a fallback. Native labeling is generally more robust and accessible, and aria-label should not be used to replace visible labels merely for styling reasons. In some cases, aria-label can provide a more descriptive name for a control than its visible label.

Best practices and limitations: Keep labels short and descriptive, avoiding redundancy with visible text. Prefer aria-labelledby to reference existing visible text when possible. Regularly test with screen readers and other assistive technologies, and update labels if the UI changes. Be mindful that not all elements require an ARIA label, and overuse can confuse users.