Live data from Hacker News

Aria-label is a code smell

ericwbailey.website

31–40 of 74 posts

Re: Aria-label is a code smell

#31

Did the term originate from Martin Fowler? Excerpt > smells don't always indicate a problem That's a poorly coined term then, if you're having to immediately clarify that it doesn't mean what its common meaning indicates.

> Did the term originate from Martin Fowler?

Wiki says Kent Beck, see https://en.wikipedia.org/wiki/Code_smell

Re: Aria-label is a code smell

#32

It will be nice when screen readers get more Ai driven to the point where accessability is automatically provided by the browser.

To be fair, browser already provide a bunch of accessibility. Unfortunately, the tech we use to build websites also provide a whole host of footguns that are too easy to trigger when building UIs of any meaningful complexity.

Re: Aria-label is a code smell

#33

Earlier quoted context omitted.

> They're not saying that using area-* cannot be correct, just that it's so often incorrect as to be a smell. But do to accessibility correctly you almost ALWAYS need to use aria-* So it this is just like saying "writing code is a code smell because you'll have bugs" and it turns "code smell" into a useless tautology.

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

Only if you want to give your users a terrible experience where the screen reader reads a bunch of separate items with no logical connection between them.

A single aria-label describing a component and its actions is always going to be better.

Re: Aria-label is a code smell

#34
post #27

Learning how to use a screen reader in order to test the a11y of my code has been on my todo for a very long time. Has anyone else done this? Is it worth it?

The easiest option is to use your operating system's default browser, and turn on assistance. So on mac use Safari and turn on Voiceover, and on Windows use edge and turn on Narrator.

To really test yourself, once you have learnt the basics of using voiceover and narrator, turn off your monitor and navigate your website :)

In my limited experience, many people use one of those two options (the situation in Linux is unfortunately much less functional).

Re: Aria-label is a code smell

#35
post #27

Learning how to use a screen reader in order to test the a11y of my code has been on my todo for a very long time. Has anyone else done this? Is it worth it?

It would take a long time to get "up to speed" (setting the speech rate to 2x or 4x like a real user) but a lot of them have modes that show the spoken text on screen. That should let you test some basic a11y features like the "skip to main content" links.

Re: Aria-label is a code smell

#36
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…

MDN agrees with the author:

Note: aria-label is intended for use on interactive elements, or elements made to be interactive via other ARIA declarations, when there is no appropriate text visible in the DOM that could be referenced as a label

https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

Re: Aria-label is a code smell

#37
post #27

Learning how to use a screen reader in order to test the a11y of my code has been on my todo for a very long time. Has anyone else done this? Is it worth it?

The easiest option is to use your operating system's default browser, and turn on assistance. So on mac use Safari and turn on Voiceover, and on Windows use edge and turn on Narrator. To really test yourself, once you have learnt the basics of using voiceover and narrator, turn off your monitor and navigate your website :) In my limited experience, many people use one of those two options (the situation in Linux is u…

In my experience on Windows NVDA is worth testing with as well.

Re: Aria-label is a code smell

#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 implemented using "" 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

#40
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."
Post reply on HN