What are the differences between label, aria-label, aria-labelledby and aria-describedby? | Accessible Web (2024)

Accessible names help browsers communicate content and functionality to users of assistive technologies. These names are not always visible on the screen, but should match any visible label when present. Situationally, they may be "hidden" within the page's markup and only communicated to assistive technologies being used.

The best strategy to use depends on the context and purpose of the interactive component that needs an accessible name.

• The native HTML label tag should be used as an accessible name for native elements when possible. This is possible when using elements like the form components <input> and <textarea>in addition to the <id> and <for> attributes.This ensures that the visible label is programmatically associated with the relevant component and helps avoid WCAG failures like Success Criterion 2.5.2 Label in Name where the accessible name needs to match the visible label. Using native functionality also helps ensure that the site is as robust as possible.
• The aria-label attribute can be used to create an accessible name for an element that doesn't have a visible text label. For example, this method is often used for interactive components that use a commonly understood symbol as their visible label. Typical examples of graphic labels include a magnifying glass for a search input or an "X" for a button that closes content. Since these components don't have text in their visible label, an aria-label can communicate the same meaning to users who aren't interacting with the page visually.
• The aria-labelledby attributecreates an accessible name by referencing another element on the page. This is commonly used when text is used as a visible label for a custom widget.
• The aria-describedby attribute does not create an accessible name. Instead, it is used when additional information is provided for an element. It enables an author to associate a text string, such as instructions, format requirements, or an error message, with an element on the page. Where a visual user may see that nearby text provides more information about how to use a component, the aria-describedby attribute communicates the same information to users of assistive technology who are not interacting with the page visually.

Visit the Web Accessibility Initiative's ARIA Authoring site for more information.