Avatar > Provide meaning for standalone identicon variant
Problem
Standalone identicon variant has no semantic meaning. This simply means that since there's only a single character in the identicon, that's how it gets announced by a screen reader. So an identicon with a 'G' character gets announced as "G", and it's not even clear that this is supposed to represented some other object.
Solution
Depending on the context, a number of methods could be used to give the avatar meaning:
-
aria-label
could be added with the full name the avatar represents. - It could use
aria-labelledby
to reference another element on the page. For example, perhaps there's a text element with a unique ID that the avatar could reference. - It could simply use
aria-hidden="true"
to be ignored by a screen reader. This would be useful when the avatar is more decorational than actually providing meaningful content.
Edited by Jeremy Elder