6 ms·

Aria-label is a code smell

94 points by gmcharlt 4y ago

draw_down 4y ago
The only thing anybody knows about accessibility is that you’re doing it wrong. Just like REST!
- earthboundkid 4y ago
  Yes! It’s not a good state of affairs. If you want people to build accessible websites, you can’t yell at them for not understanding complicated topics where best practices documents contradict each other. You have to lay out simple rules like “add an alt attribute to images.”
greatgib 4y ago
This page is impossible to read on smartphone at least. There are kilometers of empty space between each line and blocks. And the font is huge. There is 20 lines of a few words each at most per page of scroll. I have now pain in my finger scrolling so much to try to see what is the point. Also a lot of useless speech and I have not reached the point of why aria label is code smell before giving up...
- MDTHLN 4y ago
  > I have not reached the point of why aria label is code smell before giving up The main point was that they often see it used to label non-interactive elements, when it should only be used for interactive elements. It's a useful point to make, but that's not a code smell, that's faulty code. The author should have chosen a better title, e.g. "Think twice before using aria-label".
  - greatgib 4y ago
    Thank you very much for me tldr!
- deleted 4y ago
  [deleted]
- JasonFruit 4y ago
  On the other hand, it was a pleasure to open a page and not have my less-young eyes scream, "C-+!"
- Minor49er 4y ago
  Have you tried using your mobile brower's reader mode?
- jamesfisher 4y ago
  > a lot of useless speech and I have not reached the point of why aria label is code smell before giving up... This was the problem, rather than the font size. Lede buried under 2000 words of generic intro
Ensorceled 4y ago
A "code smell" is supposed to be something that is a warning sign that there are other probable issues and you should look deeper. Using aria-* incorrectly is an actual problem, not a hint that there may be deeper issues. It's always annoying when an article begins with a strained attempt to redefine well known terms.
- jholman 4y ago
  It feels like you didn't read the article I read. THIS article defines "code smell" exactly as you did. And it says that using aria-* incorrectly is not a smell, but an error, exactly as you did. The claim of the article is that using aria-* at all is a code smell, in exactly the sense you said. They list a number of possible problems, and suggest alternatives. They're not saying that using area-* cannot be correct, just that it's so often incorrect as to be a smell.
  - cratermoon 4y ago
    "The more ARIA attributes that were present, the more detected accessibility errors could be expected" This sounds about right for the current state of attention paid to assistive technology. Which is to say, it's an afterthought at best. Buying or installing some half-baked framework which attempts to use it correctly without even determining if it's correct or not and calling it good seems about as far as anyone will take it. One could make an analogy with left-pad: easy to use, but turns out it does the wrong thing for several cases.
  - Ensorceled 4y ago
    > 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.
    - user3939382 4y ago
      > 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.
douglee650 4y ago
Man talk about smell, there are like 18 olfactory cultural dimensions on display in this passage, esp. comparing para 2 as a prologue to para 1. > In my experience, the term code smell usually has a negative connotation when someone mentions it. > It’s a lot like a noticeable smell emanating from the office refrigerator. Ideally it’s some delicious homemade kimchi someone brought in, but more often than not it’s something like some forgotten fish sticks rotting in the back.
- lioeters 4y ago
  Ah yes, forgotten fish sticks - a common occurrence we can all relate to as a metaphor for questionable code.
nfw2 4y ago
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 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 put into a11y issues is the opposite of a code smell to me.
- croes 4y ago
  Seems like it's best supported on interactive elements and doesn't lead to unintended behavior. https://www.w3.org/TR/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby https://www.w3.org/TR/using-aria/#practical-support-aria-lab...
- lucideer 4y ago
  > any indication that any amount of thought has been put into a11y issues is the opposite of a code smell to me You're absolutely right but that's mainly just because the bar is so low. Ultimately it does seem like code smell to me. Insofar as it indicates you're doing something toward a11y, it's what I'd call a "good problem" (the type you only encounter when things are going in the right direction), but it seems a good indicator that a11y is being applied as an addon process (where a functional product goes through a11y review before iterating) rather than an intrinsic consideration at the architecting stage.
- lozenge 4y ago
  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/ARIA/Attributes/aria-label https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
- zachrip 4y ago
  > 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/ https://www.w3.org/WAI/ARIA/apg/patterns/) for frameworks like react. Some examples of this are radix and ariakit.
coding123 4y ago
It will be nice when screen readers get more Ai driven to the point where accessability is automatically provided by the browser.
- eajakobsen 4y ago
  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.
nicbou 4y ago
I use aria-label on all <aside> and <nav> tags. When you look at the page hierarchy, you can tell what is what without digging into the element tree. I don't understand how this could be a code smell.
politelemon 4y ago
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.
- ZephyrBlu 4y ago
  Google snippet when searching for "code smell martin fowler": "According to Martin Fowler, code smells are not problematic on their own. They are warning signals that there might be a real problem in the code. For example, long functions are considered a code smell, but not all long functions are necessarily bad or poorly designed. Fowler suggests that junior members of a development team identify code smells and review them together with senior members, who can evaluate if there is really a deeper problem in the code." https://www.sealights.io/code-quality/the-problem-of-code-smell-and-secrets-to-effective-refactoring https://www.sealights.io/code-quality/the-problem-of-code-sm... And the first google result, which is Martin Fowler's own website: "The second is that smells don't always indicate a problem. Some long methods are just fine. You have to look deeper to see if there is an underlying problem there - smells aren't inherently bad on their own - they are often an indicator of a problem rather than the problem themselves." https://martinfowler.com/bliki/CodeSmell.html https://martinfowler.com/bliki/CodeSmell.html
- Quekid5 4y ago
  > Did the term originate from Martin Fowler? Wiki says Kent Beck, see https://en.wikipedia.org/wiki/Code_smell https://en.wikipedia.org/wiki/Code_smell
nanna 4y ago
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?
- eajakobsen 4y ago
  Absolutely worth it. Has helped me a lot, finding small issues like buttons with no meaningful label or custom checkboxes that don't announce their state. I don't know what platform you're on, but I use VoiceOver on Mac. My blind relative uses JAWS on Windows.
- ohthehugemanate 4y ago
  There's no "learn how to use," just enable it on your existing devices. Settings > Accessibility on android, at least. Consider making a habit of using it when you are circumstantially visually disabled: in bright sunlight, while you can't be physically present at the phone (eg while doing dishes or folding laundry), etc.
  - Vinnl 4y ago
    I think it's good to learn the different ways people can use it too though, e.g. learn about landmark navigation, or skipping to headlines, or how people navigate a table, etc.
- CJefferson 4y ago
  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).
  - bpye 4y ago
    In my experience on Windows NVDA is worth testing with as well.
onion2k 4y ago
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 https://testing-library.com/docs/queries/about#priority
- zachrip 4y ago
  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 4y ago
    > 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 4y ago
      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 4y ago
hasperdi 4y ago
Does anyone know a good information/book/article explaining the proper implementation of ARIA attributes?
ramesh31 4y ago
>First off, aria-label is intended to only be used on interactive elements, and not non-interactive ones This ignores aria-role, which allows you to set any element (such as a div) as interactive. https://accessibilityinsights.io/info-examples/web/aria-roles/ https://accessibilityinsights.io/info-examples/web/aria-role...

94 points by gmcharlt 4y ago

draw_down 4y ago

The only thing anybody knows about accessibility is that you’re doing it wrong. Just like REST!

earthboundkid 4y ago
Yes! It’s not a good state of affairs. If you want people to build accessible websites, you can’t yell at them for not understanding complicated topics where best practices documents contradict each other. You have to lay out simple rules like “add an alt attribute to images.”

greatgib 4y ago

This page is impossible to read on smartphone at least. There are kilometers of empty space between each line and blocks. And the font is huge. There is 20 lines of a few words each at most per page of scroll. I have now pain in my finger scrolling so much to try to see what is the point. Also a lot of useless speech and I have not reached the point of why aria label is code smell before giving up...

MDTHLN 4y ago
> I have not reached the point of why aria label is code smell before giving up The main point was that they often see it used to label non-interactive elements, when it should only be used for interactive elements. It's a useful point to make, but that's not a code smell, that's faulty code. The author should have chosen a better title, e.g. "Think twice before using aria-label".
- greatgib 4y ago
  Thank you very much for me tldr!
deleted 4y ago
[deleted]
JasonFruit 4y ago
On the other hand, it was a pleasure to open a page and not have my less-young eyes scream, "C-+!"
Minor49er 4y ago
Have you tried using your mobile brower's reader mode?
jamesfisher 4y ago
> a lot of useless speech and I have not reached the point of why aria label is code smell before giving up... This was the problem, rather than the font size. Lede buried under 2000 words of generic intro

Ensorceled 4y ago

A "code smell" is supposed to be something that is a warning sign that there are other probable issues and you should look deeper. Using aria-* incorrectly is an actual problem, not a hint that there may be deeper issues. It's always annoying when an article begins with a strained attempt to redefine well known terms.

jholman 4y ago
It feels like you didn't read the article I read. THIS article defines "code smell" exactly as you did. And it says that using aria-* incorrectly is not a smell, but an error, exactly as you did. The claim of the article is that using aria-* at all is a code smell, in exactly the sense you said. They list a number of possible problems, and suggest alternatives. They're not saying that using area-* cannot be correct, just that it's so often incorrect as to be a smell.
- cratermoon 4y ago
  "The more ARIA attributes that were present, the more detected accessibility errors could be expected" This sounds about right for the current state of attention paid to assistive technology. Which is to say, it's an afterthought at best. Buying or installing some half-baked framework which attempts to use it correctly without even determining if it's correct or not and calling it good seems about as far as anyone will take it. One could make an analogy with left-pad: easy to use, but turns out it does the wrong thing for several cases.
- Ensorceled 4y ago
  > 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.
  - user3939382 4y ago
    > 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.

douglee650 4y ago

Man talk about smell, there are like 18 olfactory cultural dimensions on display in this passage, esp. comparing para 2 as a prologue to para 1. > In my experience, the term code smell usually has a negative connotation when someone mentions it. > It’s a lot like a noticeable smell emanating from the office refrigerator. Ideally it’s some delicious homemade kimchi someone brought in, but more often than not it’s something like some forgotten fish sticks rotting in the back.

lioeters 4y ago
Ah yes, forgotten fish sticks - a common occurrence we can all relate to as a metaphor for questionable code.

nfw2 4y ago

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 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 put into a11y issues is the opposite of a code smell to me.

croes 4y ago
Seems like it's best supported on interactive elements and doesn't lead to unintended behavior. https://www.w3.org/TR/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby https://www.w3.org/TR/using-aria/#practical-support-aria-lab...
lucideer 4y ago
> any indication that any amount of thought has been put into a11y issues is the opposite of a code smell to me You're absolutely right but that's mainly just because the bar is so low. Ultimately it does seem like code smell to me. Insofar as it indicates you're doing something toward a11y, it's what I'd call a "good problem" (the type you only encounter when things are going in the right direction), but it seems a good indicator that a11y is being applied as an addon process (where a functional product goes through a11y review before iterating) rather than an intrinsic consideration at the architecting stage.
lozenge 4y ago
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/ARIA/Attributes/aria-label https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
zachrip 4y ago
> 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/ https://www.w3.org/WAI/ARIA/apg/patterns/) for frameworks like react. Some examples of this are radix and ariakit.

coding123 4y ago

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

eajakobsen 4y ago
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.

nicbou 4y ago

I use aria-label on all <aside> and <nav> tags. When you look at the page hierarchy, you can tell what is what without digging into the element tree. I don't understand how this could be a code smell.

politelemon 4y ago

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.

ZephyrBlu 4y ago
Google snippet when searching for "code smell martin fowler": "According to Martin Fowler, code smells are not problematic on their own. They are warning signals that there might be a real problem in the code. For example, long functions are considered a code smell, but not all long functions are necessarily bad or poorly designed. Fowler suggests that junior members of a development team identify code smells and review them together with senior members, who can evaluate if there is really a deeper problem in the code." https://www.sealights.io/code-quality/the-problem-of-code-smell-and-secrets-to-effective-refactoring https://www.sealights.io/code-quality/the-problem-of-code-sm... And the first google result, which is Martin Fowler's own website: "The second is that smells don't always indicate a problem. Some long methods are just fine. You have to look deeper to see if there is an underlying problem there - smells aren't inherently bad on their own - they are often an indicator of a problem rather than the problem themselves." https://martinfowler.com/bliki/CodeSmell.html https://martinfowler.com/bliki/CodeSmell.html
Quekid5 4y ago
> Did the term originate from Martin Fowler? Wiki says Kent Beck, see https://en.wikipedia.org/wiki/Code_smell https://en.wikipedia.org/wiki/Code_smell

nanna 4y ago

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?

eajakobsen 4y ago
Absolutely worth it. Has helped me a lot, finding small issues like buttons with no meaningful label or custom checkboxes that don't announce their state. I don't know what platform you're on, but I use VoiceOver on Mac. My blind relative uses JAWS on Windows.
ohthehugemanate 4y ago
There's no "learn how to use," just enable it on your existing devices. Settings > Accessibility on android, at least. Consider making a habit of using it when you are circumstantially visually disabled: in bright sunlight, while you can't be physically present at the phone (eg while doing dishes or folding laundry), etc.
- Vinnl 4y ago
  I think it's good to learn the different ways people can use it too though, e.g. learn about landmark navigation, or skipping to headlines, or how people navigate a table, etc.
CJefferson 4y ago
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).
- bpye 4y ago
  In my experience on Windows NVDA is worth testing with as well.

onion2k 4y ago

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 https://testing-library.com/docs/queries/about#priority

zachrip 4y ago
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 4y ago
  > 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 4y ago
    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 4y ago

hasperdi 4y ago

Does anyone know a good information/book/article explaining the proper implementation of ARIA attributes?

ramesh31 4y ago

>First off, aria-label is intended to only be used on interactive elements, and not non-interactive ones This ignores aria-role, which allows you to set any element (such as a div) as interactive. https://accessibilityinsights.io/info-examples/web/aria-roles/ https://accessibilityinsights.io/info-examples/web/aria-role...