[go: up one dir, main page]

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