[onion2k]

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

[zachrip]

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."

[Vinnl]

> 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.

[reitanqild]

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?

[Wowfunhappy]

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. But I wish screen readers didn't do that.

[perilunar]

> 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:,">

[reitanqild]

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.

[Wowfunhappy]

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.

[onion2k]

"avatar" is fine in a test.

[zachrip]

Yep, agreed

[svl]

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

[fregante]

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.

[emptysea]

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.