A little nuance I ran into. Say you have a regular ol’ image:
<img src="some/avatar.webp" alt="Photo of so and so looking directly and camera with a toothy smile.">Cool. Now say you want to link that image somewhere:
<a href="author/so-and-so/">
<img src="some/avatar.webp" alt="Photo of so and so looking directly and camera with a toothy smile.">
</a>Double cool. But now I want unsighted visitors to know where that link goes. I suppose I could do the classic visually-hidden text thing to announce it without visually presenting it.
<a href="author/so-and-so/">
<img src="some/avatar.webp" alt="Photo of so and so looking directly and camera with a toothy smile.">
<span class="visually-hidden">Click to read this author's posts.">
</a>That seems correct, but I’m hesitant at the same time because now we have an announced link, followed by an announced image, followed by hidden directive text.
Another, perhaps simpler approach? Put the directive text in the alt:
<a href="author/so-and-so/">
<img src="some/avatar.webp" alt="Photo of so and so looking directly and camera with a toothy smile. Click to read posts.">
</a>But I’m hesitant about that. I think alternative text is only supposed to describe the image. Is adding functional context an anti-pattern?
Genuine questions: Is one approach better than the other? Is there another approach I’m simply missing? Am I over-thinking this?
5 Comments
Would https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure help here?
Not a bad thought! This gives me the shakes, though:
In this case, I doubt that the author’s avatar qualifies as a referenced figure. It’s content in and of itself. But I could be wrong!
How about `alt=”Posts by so-and-so”`?
AFAIK when an image is the only thing inside a link, the alt text becomes the link’s accessible name.
Phrases like ‘Photo of,’ ‘Image of,’ are always redundant as you end up with screen readers saying “Image: Image of…”
Specific instructions seem wrong too as users will already know it’s a link, and we don’t know the context (should it be ‘click’ or ‘tap’).
Arguably, a visual description doesn’t add much here. The image is being used as a decorative link.
So, if the link was just text what would it be? I think that’s what should go in the alt.
Some instructions on functional images here: https://www.w3.org/WAI/tutorials/images/functional/
Now that’s some damn solid advice.
I ran into something similar recently – slightly different in that my image wasn’t a link but a button that showed a larger version of the image in a lightbox when clicked.
My solution was to use a span that was not only visually-hidden but also aria-hidden – then associate it with the using aria-describedby.
This seems to work really well in VoiceOver w/Chrome/Firefox/Safari in that it announces it as ‘image alt text [slight pause] click to show a larger version’
Shame aria-description isn’t well-supported yet as that would achieve the same effect without having to mess about with a visually- and aria-hidden element
For your specific situation I completely agree with what Gary says; I just wanted to show an example of a solution for situations when the image really does need a description.