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.