ARIA Quicktip: Labelledby vs. Describedby

Last night, while we were enjoying a cool evening and a few drinks outside after day 1 of BDConf, Jeremy asked me for some clarification on the ARIA attributes I had demoed as part of my forms presentation earlier in the afternoon. In particular, he was confused by how aria-labelledby and aria-describedby differ.

I hadn’t really thought about it before, but it’s a good question. They seem pretty similar in function, right? And both support a space separated list of one or more id references. It’s downright confusing.

My simple explanation was that, at least in terms of form fields, they differ in when they are read. The aria-labelledby attribute replaces the associated label element (which is, of course, associated with the field via the label’s for attribute). The aria-describedby attribute, on the other hand, is read after the field type is stated.

To demonstrate how all of this plays out, I threw together a quick CodePen demo that takes you through numerous ways you can use and combine these attributes. I also did a screen recording to demonstrate how ChromeVox exposes these attributes:

Update: Steve Faulkner shared a doc that discusses how accessible names and descriptions are calculated. Thanks Steve!

Note: I did discover a bug in ChromeVox wherein the content of the elements referenced in aria-describedby are not read when the field receives focus via the keyboard (using the tab key), but it does when it receives focus via the mouse. I’ve submitted a bug report to to the powers that be.