How to label text fields with ARIA

A presentation at DDD By Night in April 2021 in Melbourne VIC, Australia by Allison Ravenhall

Slide 1

Slide 2

<label>

Slide 3

But sometimes <label> doesn’t cut it • Composite label • No label on screen • Format info, examples, instructions

Slide 4

Composite label → aria-labelledby

Slide 5

No on-screen label → aria-label

Slide 6

Supplementary info → aria-describedby aria-describedby is not a label

Slide 7

More options? aria-details Contains pointer to rich content or a URL. Not a label. Poor screen reader support. aria-description Like aria-describedby but contains a string. Not a label. Doesn’t exist (yet).