Avatar > aria-label must identify link purpose
Problem
The linked avatar (identicon) lacks actionable meaning (also part of the stacked (inline) example). In other words, an identicon avatar has nothing to identify what the single text character represents or what it links to.
Solution
The parent anchor should have an aria-label that identifies the destination or purpose of the link, and the element within that contains the single character should not be announced by a screen reader.
Simplified example:
| Before | After |
|---|---|
<a href="avatarLink"><div> G </div></a> |
<a href="avatarLink" aria-label="Go to the group dashboard"><div aria-hidden="true"> G </div></a> |
Edited by Jeremy Elder