Avatar
Avatars are used to represent a user or a system entity. They can be used to represent a person, a group of people, or an object.
This component was tested and signed off by Applause (external accessibility specialists).
- Label interactive avatars
- Always provide an aria-label when the avatar is a link (href) or a button (clickable).
- Use clear, descriptive text (e.g. “Profile avatar”, “User profile picture”).
- Label icons in slots
- When using the icon slot, always provide a label property.
- See the Icon component guidelines for details.
- Mark decorative avatars as presentation
- If the avatar is purely decorative and not interactive, use
role="presentation"so it’s ignored by assistive technologies.
- If the avatar is purely decorative and not interactive, use