Instead, we should describe what happens when the user clicks on the icon! • “Go to course curriculum page” • “Go to main dashboard” A lot of icons use visual conventions that may not make as much sense to visually-impaired folks. Plus it’s just more useful to describe the action. - ThreadSky

joshwcomeau.com • 204 days ago

Instead, we should describe what happens when the user clicks on the icon!

• “Go to course curriculum page”
• “Go to main dashboard”

A lot of icons use visual conventions that may not make as much sense to visually-impaired folks. Plus it’s just more useful to describe the action.

Comments

joshwcomeau.com•204 days ago

This is one of those things where rather than memorize a bunch of rules, I think it’s much easier to use our intuition. We should ask ourselves this question:

> If this image failed to load, what would I NEED to know in order to understand this content / engage with this application?

joshwcomeau.com•203 days ago

Eduardo makes a good point: we don’t need the words “go to”, since the navigation is made evident by the tag.

https://bsky.app/profile/eduardopereira.dev/post/3l7yuubp6pl2g

jclahoot.bsky.social•204 days ago

Thanks! ☺️ that’s a very easy way to understand it!

resource11.bsky.social•204 days ago

Thanks for this thread!

You may want to consider how the combination of assistive technology affects the alt text experience in context. @ericwbailey.website wrote a great article on alt text:

https://ericwbailey.website/published/dungeons-and-dragons-taught-me-how-to-write-alt-text/

dohn.vlkstudio.com•204 days ago

wouldn't those buttons/links have an aria-label (or hidden text) saying that exact sentence? not saying it's wrong, just asking if in this case it's common for the alt text to be identical to the label

joshwcomeau.com•204 days ago

Yeah, so in my actual platform, the icons are SVGs and I use visually-hidden text for the alt text.

Probably should have clarified that I'm saying "alt text" to mean "any non-visible text that accompanies an image", and not narrowly "what you set the `alt` attribute to".

eduardopereira.dev•203 days ago

Great thread Josh! In this case where the icon description would be the link action, I would remove the “go to” part of the text because links are always for navigation, so that information is redundant. Similar to no why you shouldn’t add “image of…” in an image alt text

joshwcomeau.com•203 days ago

Oh right! Very good point 😄 thanks for letting me know

silvenon.com•204 days ago

Ok this is a very good point, I forgot that I can't just expect people who can't see to guess what the thing will do based on what the icon depicts ("house"). If they can't see, they also cannot see the position, visual treatment etc., all of which indicate the action. Thanks for this thread!

Comments

Posting Rules

Reply