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
labeltag should be used as an accessible name for native elements when possible. This is possible when using elements like the form components
<textarea>in addition to the
<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.
aria-labelattribute 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-labelcan communicate the same meaning to users who aren't interacting with the page visually.
aria-labelledbyattribute creates 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.
aria-describedbyattribute 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-describedbyattribute 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.