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.



Comments

Note: These are comments exported from my old blog. Going forward, replies to my posts are only possible via webmentions.
  1. Paul

    Been trying to work out why ChromeVox doesn't read my describedby when I tab with the keyboard, then I found this post! Looks like the bug is still not fixed just yet.

    Thanks for the insightful post.

  2. vishwakant

    Do we have any fix now for aria-descriedby issue? I am facing same issue, screen reader Chrome Vox does not read aria-describedby value while focus on textbox by Tab.

    1. Aaron Gustafson

      It looks like this bug got archived when Google Code closed, but I think ChromeVox Next fixed it.