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.


This content originally appeared on Go Make Things and was authored by Go Make Things

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 versus aria-valuetext, or aria-checked versus aria-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, and aria-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!

🔥 Join the Vanilla JS Academy! A new session starts on April 3. Click here to learn more.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2023-03-24T14:30:00+00:00) ARIA labels and descriptions. Retrieved from https://www.scien.cx/2023/03/24/aria-labels-and-descriptions/

MLA
" » ARIA labels and descriptions." Go Make Things | Sciencx - Friday March 24, 2023, https://www.scien.cx/2023/03/24/aria-labels-and-descriptions/
HARVARD
Go Make Things | Sciencx Friday March 24, 2023 » ARIA labels and descriptions., viewed ,<https://www.scien.cx/2023/03/24/aria-labels-and-descriptions/>
VANCOUVER
Go Make Things | Sciencx - » ARIA labels and descriptions. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/24/aria-labels-and-descriptions/
CHICAGO
" » ARIA labels and descriptions." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2023/03/24/aria-labels-and-descriptions/
IEEE
" » ARIA labels and descriptions." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2023/03/24/aria-labels-and-descriptions/. [Accessed: ]
rf:citation
» ARIA labels and descriptions | Go Make Things | Sciencx | https://www.scien.cx/2023/03/24/aria-labels-and-descriptions/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.