The Avatar visually represents a user, team, or entity using an image, initials, or icon.
Accessible avatars must communicate who or what they represent and convey status or presence (if applicable) without relying solely on color.
| Interaction | Behavior |
|---|---|
| Tab | Moves focus to the Avatar if it’s interactive (e.g., opens a profile card). |
| Enter / Space | Activates linked action (e.g., opens profile or menu). |
| Shift + Tab | Moves focus backward in tab order. |
If the Avatar is purely decorative, it must not be focusable and should use aria-hidden="true".
Use semantic <img> with a descriptive alt attribute:
<img src="user.jpg" alt="Oussema Zarrouki" />
If showing initials or text, use aria-label or visible name:
<div role="img" aria-label="Oussema Zarrouki">OZ</div>
Decorative avatars (purely visual):
<img src="placeholder.png" alt="" aria-hidden="true" />
Use <button> or <a> element with aria-label describing the action:
<button aria-label="Open Oussema Zarrouki’s profile">
<img src="oussema.jpg" alt="" />
</button>
If part of a list (e.g., participants), include context:
<button aria-label="View profile for Oussema Zarrouki, online"></button>
Use aria-label or aria-describedby to announce status textually:
<div role="img" aria-label="Oussema Zarrouki — Online"></div>
Avoid using color alone to indicate status (add tooltip or text).