Components
Avatar
Avatar displays an image, initials, or icon for a person, entity, or profile.
What you need to check
Informative Avatar must have an accessible name.
The accessible name can be provided using aria-label. If multiple avatars are displayed together, each name must be unique.
Decorative Avatar must be hidden from screen readers.
This applies when the Avatar is purely decorative and does not convey information. Example: If an Avatar is shown inside a button with the text “Ola Nordmann”, the avatar can be hidden because the name already identifies the person.
WCAG: 1.1.1 Non-text content
Clickable Avatar must have an accessible name.
The accessible name can be provided using aria-label. Example: “Profile for Ola Nordmann”. Avvoid: just initails or “Avatar”.
WCAG: 4.1.2 Name, role, value
Edit this page on github.com (opens in a new tab)