Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Aria-label is a code smell

ericwbailey.website

Post reply on HN
Print view View original

41–50 of 74 posts

Re: Aria-label is a code smell

#41

Post by zachrip »

nfw2 wrote: post #12

The article claims that aria-label is only intended to be used on interactive elements. This surprised me, so I looked into it. The ARIA spec says aria-label can used with any roles, with no mention of being reserved for interactive elements. https://www.w3.org/TR/wai-aria-1.1/#aria-label Also, maybe I am too jaded by working at orgs that don't care about a11y, but any indication that any amount of thought has been p…

> Also, maybe I am too jaded by working at orgs that don't care about a11y, but any indication that any amount of thought has been put into a11y issues is the opposite of a code smell to me.

You can actually reduce accessibility by misusing aria attributes. Folks should try to use semantic elements first. Then if those aren't meeting their needs (please try to make them meet your needs), there are good, well tested implementations of the common aria patterns (https://www.w3.org/WAI/ARIA/apg/patterns/) for frameworks like react. Some examples of this are radix and ariakit.

Re: Aria-label is a code smell

#42

Post by svl »

onion2k wrote: post #38

One of the nice things about Testing Library (a library that provides helpers for testing frontend code) is that it encourages devs to use Aria tags to find elements in the DOM to test[1]. This has the neat side effect that frontend devs who want to unit test their components 'accidentally' make them more accessible. I suspect this could be at least partly responsible for the overuse of aria-label. An element can be…

Luckily I don't see any "encouragement to use aria" on that page you linked to, as that - and particular your example - goes directly against the first rule of ARIA [1] (paraphrased: "only ever use ARIA if you can't use native HTML").

[1] https://www.w3.org/TR/using-aria/#rule1

Re: Aria-label is a code smell

#43

Post by [deleted] »

onion2k wrote: post #38

One of the nice things about Testing Library (a library that provides helpers for testing frontend code) is that it encourages devs to use Aria tags to find elements in the DOM to test[1]. This has the neat side effect that frontend devs who want to unit test their components 'accidentally' make them more accessible. I suspect this could be at least partly responsible for the overuse of aria-label. An element can be…

[deleted]

Re: Aria-label is a code smell

#44

Post by Archelaos »

nfw2 wrote: post #12

The article claims that aria-label is only intended to be used on interactive elements. This surprised me, so I looked into it. The ARIA spec says aria-label can used with any roles, with no mention of being reserved for interactive elements. https://www.w3.org/TR/wai-aria-1.1/#aria-label Also, maybe I am too jaded by working at orgs that don't care about a11y, but any indication that any amount of thought has been p…

The current[1] WAI-ARIA spec is to blame for not clearifying this intend. However, the W3C Editor's Draft of WAI-ARIA 1.3 of 26 October 2022 attempts to do so:

"In the cases where DOM content or a tooltip is undesirable, authors MAY set the accessible name of the element using aria-label, if the element does not prohibit use of the attribute. [...] Authors MUST NOT specify aria-label on an element which has an explicit or implicit WAI-ARIA role where aria-label is prohibited."[2]

[1] This is WAI-ARIA 1.2 (and not 1.1): https://www.w3.org/TR/wai-aria-1.2/#aria-label

[2] https://w3c.github.io/aria/#aria-label

Re: Aria-label is a code smell

#45

Post by oneeyedpigeon »

Ensorceled wrote: post #21
user3939382 wrote: post #16

Earlier quoted context omitted.

> But do to accessibility correctly you almost ALWAYS need to use aria-* What? No... Screen readers do best with standard elements and you're supposed to avoid aria labels where possible, and only as a last resort.

> What? No... Screen readers do best with standard elements and you're supposed to avoid aria labels where possible, and only as a last resort. Yes, you should avoid overusing them, which is the point the author is turning into a "code smell", but I've no idea how the heck you would pass an AAA or even a AA audit without aria-* labels. Can you point me to a significant site, i.e. one that's not just a simple content…

What is the minimum amount of functionality that, in your opinion, would 'elevate' a site beyond 'simple content' territory?

Re: Aria-label is a code smell

#46

Post by fregante »

onion2k wrote: post #38

One of the nice things about Testing Library (a library that provides helpers for testing frontend code) is that it encourages devs to use Aria tags to find elements in the DOM to test[1]. This has the neat side effect that frontend devs who want to unit test their components 'accidentally' make them more accessible. I suspect this could be at least partly responsible for the overuse of aria-label. An element can be…

I don’t think it's actually a net benefit. Adding the wrong value degrades the experience.

I've seen links marked with `role=button` for no reason and generally roles added when one is implied (role=link is implied on anchors for example).

If aria attributes are treated as "private/testing API", then one wouldn't be surprised when the value only makes sense to bots and not humans.

Re: Aria-label is a code smell

#47

Post by Vinnl »

zachrip wrote: post #40
onion2k wrote: post #38

One of the nice things about Testing Library (a library that provides helpers for testing frontend code) is that it encourages devs to use Aria tags to find elements in the DOM to test[1]. This has the neat side effect that frontend devs who want to unit test their components 'accidentally' make them more accessible. I suspect this could be at least partly responsible for the overuse of aria-label. An element can be…

For those reading: using avatar as the alt text or aria-label is also wrong. At minimum it should say whose avatar it is but the ideal scenario is a description of what is in the image. The point of alt text is to make it accessible to everyone (slow connection, visually impaired, etc). Close your eyes and think "avatar" - not very useful, a better example is "Me in front of a lake showing off a fish I just caught."

> the ideal scenario is a description of what is in the image.

I'd say the ideal scenario is conveying the information that the image conveys. If there is no new information in the image (for example, it might be redundant with the username next to it), it's better to explicitly add an empty alt tag, as far as I'm aware.

Re: Aria-label is a code smell

#48

Post by Ensorceled »

oneeyedpigeon wrote: post #45
Ensorceled wrote: post #21

Earlier quoted context omitted.

> What? No... Screen readers do best with standard elements and you're supposed to avoid aria labels where possible, and only as a last resort. Yes, you should avoid overusing them, which is the point the author is turning into a "code smell", but I've no idea how the heck you would pass an AAA or even a AA audit without aria-* labels. Can you point me to a significant site, i.e. one that's not just a simple content…

What is the minimum amount of functionality that, in your opinion, would 'elevate' a site beyond 'simple content' territory?

So, no examples?

Re: Aria-label is a code smell

#49

Post by Ensorceled »

derefr wrote: post #22
Ensorceled wrote: post #21

Earlier quoted context omitted.

> What? No... Screen readers do best with standard elements and you're supposed to avoid aria labels where possible, and only as a last resort. Yes, you should avoid overusing them, which is the point the author is turning into a "code smell", but I've no idea how the heck you would pass an AAA or even a AA audit without aria-* labels. Can you point me to a significant site, i.e. one that's not just a simple content…

Why do you elevate "significance"? In terms of the number of developers who care, "significant sites" are a minor niche. The web obeys a power law; there are only 1000 "significant" websites in the world, and far more "insignificant" ones. Most of the world's web developers are creating blogs, business-card-ware (e.g. restaurant websites that let you see the menu as a PDF but don't let you order from it), and HTML-ba…

So, no examples?

Re: Aria-label is a code smell

#50

Post by Vinnl »

nfw2 wrote: post #12

The article claims that aria-label is only intended to be used on interactive elements. This surprised me, so I looked into it. The ARIA spec says aria-label can used with any roles, with no mention of being reserved for interactive elements. https://www.w3.org/TR/wai-aria-1.1/#aria-label Also, maybe I am too jaded by working at orgs that don't care about a11y, but any indication that any amount of thought has been p…

I was surprised as well, and I wonder what the reason for that is.

The article also mentions that it's explicitly disallowed on a bunch of elements in point #5 [1]. I know that I've used an aria-label on a element in the past because the actual order of the contents of the element in there was kinda funky due to the visual presentation, so it felt like it would make sense to have a more sensible description in an aria-label. I wonder what the problem with that would've been, had browsers not discarded it?

[1] https://w3c.github.io/aria/#namefromprohibited

Post reply on HN