ARIA labels and descriptions
Today, I wanted to share a post from my friend Ben Myers on [aria-label]
, [aria-labelledby]
, and [aria-describedby]
: what they do, how they’re different, and when to pick one over the other.
ARIA is a set of HTML attributes designed to tweak how a webpage is exposed to assistive technology. It can be… a lot. There are presently 36 aria-* attributes, each with their own specific or general use cases, their own rules for compatible elements and roles, and their own browser/screenreader support tables. On top of that, they can be hard to keep straight—when should you use
aria-valuenow
versusaria-valuetext
, oraria-checked
versusaria-selected
?I’ve written about ARIA before, but this time, I’d like to hone in on three ARIA attributes that, in my experience, are just similar enough to be confusing:
aria-label
,aria-labelledby
, andaria-describedby
.
If, like me, you know accessibility is important but often find the nuances of it confusing and overwhelming, go check out Ben’s post! It’s a very good read!