Skip to content

Latest commit

 

History

History
59 lines (29 loc) · 1.91 KB

ARIA_Labeling_f38c21c.md

File metadata and controls

59 lines (29 loc) · 1.91 KB
loio
f38c21c2f71e455e8d4a959522035a1f

view on: demo kit nightly build | demo kit latest release

ARIA Labeling

Proper labeling of all UI elements is needed in order to ensure the screen reader announces everything correctly. Here we describe the available options and how and when they should be used.

Labeling

There are several options for labeling:

  1. Label element with labelFor attribute

    • Single ID reference to the labeled control

    • Reference is maintained on the label, not on the labeled control

    • Multiple references are not possible

    Example:

    <Label text="Product price" required="true" labelFor="productPriceInput"/>

  2. The aria-label attribute

    • Text is directly provided in the attribute, no extra HTML control needed

    • Attribute is maintained on the labeled control

    • Only indirect support for multiple texts

  3. The aria-labelledBy attribute

    • Whitespace separated list of ID references to controls

    • Attribute is maintained on the labeled control

    • Explicitly designed for multiple references

Caution:

The different options cannot be used in conjunction. There is a precedence rule, which determines how the labeling attributes are prioritized and read by the screen reader. As an application developer, you need to be aware of the order in which the labeling is read by your screen reader.

Related Information

Best Practices for ARIA Labeling