News for hackers. Stuff that matters.
Re:Aria-label is a code smell by onion2k on Wednesday November 02, 2022 @05:50AM (#33433374)
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 implemented using "<img aria-label='avatar' src='user.jpg' />" and then tested using "getByRole('img', { name: 'avatar' })". This is technically wrong because getByAltText would be preferable, but it works and it's easy so devs do it.

[1] https://testing-library.com/docs/queries/about#priority

Re:Aria-label is a code smell by fregante on Wednesday November 02, 2022 @06:38AM (#33433718)
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 by svl on Wednesday November 02, 2022 @06:30AM (#33433666)
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 by zachrip on Wednesday November 02, 2022 @06:23AM (#33433620)
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."
Re:Aria-label is a code smell by Vinnl on Wednesday November 02, 2022 @06:51AM (#33433791)
> 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 by reitanqild on Wednesday November 02, 2022 @07:00AM (#33433878)
Adding an empty alt tag is often the correct thing yes.

Rule of thumb: if someone read the page out to you, would you prefer if they read that alt tag you are thinking of adding or not?

Re:Aria-label is a code smell by Wowfunhappy on Wednesday November 02, 2022 @11:11AM (#33437131)
I wish omitting alt text was the equivalent of empty alt text.

Nothing else works this way. If a page doesn't have a favicon, you don't add an empty icon href.

I know empty alt text is preferred because otherwise, screen readers will usually revert to reading the file name. I wish screen readers didn't do that.

Re:Aria-label is a code smell by reitanqild on Wednesday November 02, 2022 @12:07PM (#33438101)
I always thought it was standardized that way in an effort to get people to care about accessibility.

But FWIK it might just be because someone on the standards committee wanted it that way.

Re:Aria-label is a code smell by Wowfunhappy on Wednesday November 02, 2022 @03:21PM (#33441516)
Does that work though? If you don't care about accessibility, you can still leave out the tags. Screen readers will then default to reading the file name, which I'd argue is worse than skipping over images in the general case.
Re:Aria-label is a code smell by reitanqild on Thursday November 03, 2022 @01:07AM (#33447251)
It probably worked better when everyone validated their pages and (I think) html quality used to be a ranking factor in Google.
Re:Aria-label is a code smell by perilunar on Wednesday November 02, 2022 @10:38PM (#33446226)
> If a page doesn't have a favicon, you don't add an empty icon href.

You can though — it prevents a 404 error being logged in the browser console.

e.g. <link rel="icon" href="data:,">

Re:Aria-label is a code smell by onion2k on Wednesday November 02, 2022 @11:53AM (#33437834)
"avatar" is fine in a test.
Re:Aria-label is a code smell by zachrip on Thursday November 03, 2022 @06:24AM (#33449090)
Yep, agreed
Re:Aria-label is a code smell by emptysea on Wednesday November 02, 2022 @09:54AM (#33435778)
One caveat with testing library’s getByRole function is that it’s really really slow.

In my experience with medium side components it would take seconds to find the element vs a few milliseconds for getByTestId.