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

51–60 of 74 posts

Re: Aria-label is a code smell

#51

Post by Ensorceled »

ohgodplsno wrote: post #33
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.

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.

Exactly. I made a large site AODA compliant and, yes, I could have done it without aria-* but it would have been a really shitty UX.

Re: Aria-label is a code smell

#52

Post by Vinnl »

Ensorceled wrote: post #14
jholman wrote: post #9

Earlier quoted context omitted.

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,…

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

They're not saying all aria- attributes are a code smell, just that aria-label is. And they provided an extensive list of common usages where an alternative would usually be better.

Re: Aria-label is a code smell

#53

Post by oneeyedpigeon »

Ensorceled wrote: post #48
oneeyedpigeon wrote: post #45

Earlier quoted context omitted.

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

So, no examples?

OK, Eric Meyer's URL Decoder/Encoder:

https://meyerweb.com/eric/tools/dencoder/

Re: Aria-label is a code smell

#54

Post by reitanqild »

Vinnl wrote: post #47
zachrip wrote: post #40

Earlier quoted context omitted.

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.

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

#55

Post by Vinnl »

nanna wrote: 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?

Yes! It's not even that much of a time investment; a short video [1] and some playing around can already give you a pretty good grip of common issues in 15 minutes.

Yes, that's not enough for properly evaluating the performance of what you're working on (screen readers differ far more than browsers do, and there's many different ways of navigating), but it helps form a mental model and to quickly encouter really egregious issues that e.g. make your entire project inaccessible with any screen reader.

[1] I think I used this one, to learn the general principles and to at least find the terms needed to find the shortcuts for my operating system: https://www.youtube.com/watch?v=5R-6WvAihms

Re: Aria-label is a code smell

#56

Post by Vinnl »

ohthehugemanate wrote: post #30
nanna wrote: 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?

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.

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.

Re: Aria-label is a code smell

#57

Post by dubcanada »

Ensorceled wrote: post #8

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.

I am not sure I fully agree, opening up a old website and smashing a bunch of aria-* tags does not fix anything. It just adds a bunch of aria-* stuff that may or may not be used.

To correctly implement accessibility on a website can require a fair amount of redoing components so they are properly accessible.

Re: Aria-label is a code smell

#58

Post by bryanrasmussen »

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…

The vagaries of English being what they are significant does not need mean important, in this case I think they mean a site with a significant amount of work behind it. That is to say not a quick resume site. A real site with a few 100 pages and complicated workflows are significant in the way I believe the OP meant.

>You don't need the aria- tag attributes when building any of those.

what, these are exactly the sites where you need aria tags, because they all have buttons and workflows the context and usage of which are totally obvious to anyone who can see and completely opaque otherwise.

Even IF in one of these sites they order of your markup is such that the elements follow in a correct order and the seen text will be understandable when accessed through the screen reader there are likely to be instances in which, if you care about the experience of a visually challenged user, extra work would be useful to allow for navigating between parts of the site in an understandable way and to do things with a reasonable speed.

Re: Aria-label is a code smell

#59

Post by bryanrasmussen »

nanna wrote: 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?

I have considered writing a guide to using Voiceover for sighted users as a power tool, because it is great. The other ones not so much. The main problem you will find if you are developing is you cannot expect stuff that works in one screenreader browser combo to work reliably in others so you need to do a lot of testing with different combinations.

Re: Aria-label is a code smell

#60

Post by Zardoz84 »

nanna wrote: 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?

If you are on Linux, give a try to Orca. It integrates nicely with KDE/Plasma and Gnome... and the browsers (Firefox, Chromium, Edge...)
Post reply on HN