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?