Avatar > Use aria-hidden for avatar in anchor with text
Problem
An avatar within a link that also contains visible text shouldn't be announced by a screen reader. When an avatar is present within an anchor that also includes text, the text alone can be the subject of the link. This applies to both image and identicon avatars.
As is, when the avatar is announced as part of the link, either the alt
text or identicon character is used. In the case of an image avatar, this means the text could be redundant and announced twice. In the case of the identicon, it means that single character is announced and it's not clear what it means.
Examples
Image avatar in link | Identicon avatar in link |
---|---|
CleanShot_2022-01-31_at_08.57.28 | |
alt should be alt=""
|
The character is announced as part of the link, but shouldn't be. |
Solution
- An image avatar within a link that also contains text should use
alt=""
so that only the link text is announced. - An identicon avatar within a link that also contains text should use
aria-hidden="true"
so that the character within the avatar isn't announced.
Edited by Jeremy Elder