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
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
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.
- ARIA Quicktip: Labelledby vs. Describedby aaron-gustafson.com/notebook/aria-… #a11y #a11yTO
- @AaronGustafson : thank you for aaron-gustafson.com/notebook/aria-…. The link “how accessible names […] are calculated” is dead and has moved to w3.org/TR/html-aam-1.… I think.
CommentsNote: These are comments exported from my old blog. Going forward, replies to my posts are only possible via webmentions.
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.
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.
It looks like this bug got archived when Google Code closed, but I think ChromeVox Next fixed it.