aria-labelledby usage notes

Like aria-label, aria-labelledby provides the opportunity for a developer to expose a short text string as the accessible name for an element. The mechanism to do so differs. While aria-label accepts a string of text, aria-labelledby accepts 1 or more id values (NOT a STRING OF TEXT).

The same opportunity is afforded by native HTML labelling features, please do use the native features wherever practical!, for example:

  • poot
  • belt on

aria-labelledby is one of a number of secondary methods to label native HTML UI elements. It works particularly well on interactive elements, it also works well on most block level elements old skool term that have explicitly or implicitly defined structural roles. It works less well or not at all on text level semantics. It is prohibited as are any form of accessible name on a whole slew of roles.

Implicit roles are those applied automatically by browsers to native HTML elements.

Explicit roles are those applied by developers using the role attribute. When applied they override the implicit role of an element.

(Somewhat out of place here) general rules for labeling

  • Prefer visible over hidden labels
  • Prefer text labels over icons
  • If icons are used provide a supplementary text label ( may be displayed on focus/hover)
  • Place [...]
  • Read article at html5accessibility.com

    Article Taxonomies