Using the aria-label and aria-labelledby attribute on Table-Forms

Note: In the 2021 WebAIM Million analysis: Home pages averaged 7.6 aria-label or aria-labelledby attributes (an increase from 5.6 in 2020). 1 out of every 15 aria-labelledby and aria-describedby attributes had broken references (meaning the element referenced by the ARIA attribute did not exist on the page).

Sometimes you don't have space on the screen to put a label, or that label would interfere with the design. Or, you might need to put two or more labels on a single control.

• Create a hidden label with aria-label.
• Assign multiple labels using aria-labeledby on form controls
• CAVEAT - both override onscreen text. Can create problems for speech-input users.
• VoiceOver behavior spotty

The Form (ARIA)

Note:
Labrador Retriever Black uses title (t),
Cocker Spaniel Black uses aria-label (al),
Labrador Retriever Yellow uses aria-labelledby (alb),
Cocker Spaniel Yellow uses nothing.

The HTML