Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for How to NOT use aria-label
Timothy Foster
Timothy Foster

Posted on

     

How to NOT use aria-label

In light ofGlobal Accessibility Awareness Day, I started writing about accessibleweb components, but that's taking me a lot longer to finish than anticipated 🙃 So for now, here's a quick thing I learned about using (or rather,not using)aria-label!


Thearia-label attribute gives a textual name to an HTML element. A close button is a classic example:

<buttonaria-label="Close">×</button>
Enter fullscreen modeExit fullscreen mode

Visually, you would see a "×", which indicates a window will be closed. Meanwhile, someone who uses ascreen reader will hear "Close, button", which conveys the same thing. Without thearia-label, they would hear "Times, button" instead, which is rather confusing.

So,aria-label is very useful! However, generally speaking, it isn't the first tool you should reach for when providing atextual representation for an element.

So, let's explore whennot to usearia-label!

Elements that can't use aria-label

Don't use aria-label for roles where it isn't allowed!

You can't putaria-label on aspan:

<!-- Don't do this! --><spanaria-label="Apple">Orange</span>
Enter fullscreen modeExit fullscreen mode

It mightlook like visual readers get an orange, while screen readers get an apple, but that's not really what happens here. In fact, what happens isnot well-defined nor consistent across browsers and assistive tools.

Thespan is just one example. Thearia-label definition lists many roles for which it is forbidden.

The general rule is thataria-label can only be used onname-assignable roles, which includesinteractive elements and not static elements.

Instead, you have a couple of choices:

  • Explicitly assign an interactive role
  • Make the screen reader textvisually hidden with CSS
<!-- Assign a role, but also just use a normal button...? --><spanrole="button"aria-label="close">×</span><!-- Make the text visually hidden --><spanclass="visually-hidden">Apples</span><spanaria-hidden="true">Oranges</span>
Enter fullscreen modeExit fullscreen mode

Use native HTML instead

Avoid aria-label where regular HTML can be used instead!

HTML is alreadydesigned to provide textual representation for virtually anything. As such, you will almost always rely on these mechanisms rather than needingaria-label.

  • The text content of a button is its textual representation (<button>Submit</button>).
  • Images are supplied analt attribute which is its textual label.
  • Form controls have a correspondinglabel element to describe them.
  • Figures and tables havefigcaption andcaption respectively.
  • Even page sections are generally described by theirpage headings (<h2>,<h3>, etc).

Notably, most of these mechanisms (by default) provide the same text to sighted and non-sighted people alike. So,aria-label is best reserved for when theseshouldn't be the same, or for when the sighted representation conveys meaning without text (such as using the "×" symbol to represent "close").

<!-- Avoid this... --><tablearia-label="Quarterly Earnings"><!-- ...when you can use native HTML --><table><caption>Quarterly Earnings</caption></table>
Enter fullscreen modeExit fullscreen mode

Some text is for everyone

Avoid aria-label for text that is valuable to everyone!

Most textual representations provided by HTML are both visible and available for screen readers simultaneously. And that's for good reason:

For example, perhaps there are keyboard shortcuts you want people using screen readers to be aware of (e.g. "PressEsc to exit the modal"). Yet, that text is just as useful to sighted people using a mouse, as they may prefer the alacrity of pressingEsc over moving a mouse to a button.

To hide info like this by default, consider usingtooltips or thedetails HTML element.

So when do I use aria-label?

I wrote about this because I had developed a tendency to overusearia-label anytime I needed something "for screen readers", and doing so led to web pages that were either non-compliant (failingaxe accessibility testing) or less accessible than I thought they were.

As usual, the first rule of using ARIA is tonot use ARIA:

  • Don't use aria-label for roles where it isn't allowed!
  • Avoid aria-label where regular HTML can be used instead!
  • Avoid aria-label for text that is valuable to everyone!

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
melnik909 profile image
Stas Melnikov
A man who helps you learn more about CSS and Accessibility

Thank you for this post! I agree. But unfortunately we haven't proofs why native HTML elements is better than aria-label.

Yes, you're right there are HTML elements which allow to convey information without aria-label. But! People have to know MORE elements than they know. If I need to remember only aria-label that EASIER than remember 10 HTML elements. That is the first point.

Also people don't understand why using aria-label worse than HTML elements. They see the same result. So they don't see the difference between this two points.

Yes, you've told about really good cases. But developers or designer don't think about people who use screen readers and DON'T have vision disabilities. They think about users who have it. That's the second point.

Unfortunately I don't know how to change that in global context. We can personally talk about it but we can't use the tools like news websites to change this situation.

Thank you again!

CollapseExpand
 
auroratide profile image
Timothy Foster
Trying to make the world a funner place through coding.
  • Location
    Dallas
  • Pronouns
    he/him
  • Work
    Software Engineer
  • Joined

Thanks for the feedback! Indeed, I know my personal reach is fairly limited. It is nice that for a couple hours of work, I can solidify a concept in my mind and create a resource I can share in the future.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Trying to make the world a funner place through coding.
  • Location
    Dallas
  • Pronouns
    he/him
  • Work
    Software Engineer
  • Joined

More fromTimothy Foster

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp