Skip to content
Relements Relements

Avatar

A circular user image, or a text-initials fallback. Size with data-size.

Initials & sizes

Section titled “Initials & sizes”
AL GH AT
Live example
<div class="row">
  <span class="re-avatar" data-size="sm" role="img" aria-label="Ada Lovelace">AL</span>
  <span class="re-avatar" role="img" aria-label="Grace Hopper">GH</span>
  <span class="re-avatar" data-size="lg" role="img" aria-label="Alan Turing">AT</span>
</div>

Image

Section titled “Image”
Sample avatar
Live example
<span class="re-avatar" data-size="lg">
  <img
    alt="Sample avatar"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Crect%20width='44'%20height='44'%20fill='%232563eb'/%3E%3Ccircle%20cx='22'%20cy='17'%20r='8'%20fill='white'/%3E%3Crect%20x='9'%20y='29'%20width='26'%20height='15'%20rx='7.5'%20fill='white'/%3E%3C/svg%3E"
  />
</span>

Presence

Section titled “Presence”

A .re-avatar__presence dot pins a status to the avatar’s bottom-end corner. data-presence sets the state: online (green), away (amber), busy (red with a do-not-disturb bar), offline (hollow); without the attribute the dot is a neutral “unknown” grey.

Sample avatar Online GH AT AL KJ
Live example
<div class="row">
  <!-- Image avatar: the dot carries a screen-reader status word. -->
  <span class="re-avatar" data-size="lg">
    <img
      alt="Sample avatar"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Crect%20width='44'%20height='44'%20fill='%232563eb'/%3E%3Ccircle%20cx='22'%20cy='17'%20r='8'%20fill='white'/%3E%3Crect%20x='9'%20y='29'%20width='26'%20height='15'%20rx='7.5'%20fill='white'/%3E%3C/svg%3E"
    />
    <span class="re-avatar__presence" data-presence="online">
      <span class="re-sr-only">Online</span>
    </span>
  </span>
  <!-- Initials avatars: role="img" makes descendants presentational, so
       the status lives in the aria-label and the dot stays empty. -->
  <span class="re-avatar" role="img" aria-label="Grace Hopper, away">
    GH
    <span class="re-avatar__presence" data-presence="away"></span>
  </span>
  <span class="re-avatar" role="img" aria-label="Alan Turing, busy">
    AT
    <span class="re-avatar__presence" data-presence="busy"></span>
  </span>
  <span class="re-avatar" role="img" aria-label="Ada Lovelace, offline">
    AL
    <span class="re-avatar__presence" data-presence="offline"></span>
  </span>
  <span class="re-avatar" data-size="sm" role="img" aria-label="Katherine Johnson, online">
    KJ
    <span class="re-avatar__presence" data-presence="online"></span>
  </span>
</div>

Group

Section titled “Group”

An overlapping stack with an optional overflow count. Give the group a role="group" and an aria-label that states its purpose and the true total — the count must include the hidden people, since the “+N” chip is aria-hidden. Each avatar still carries its own name.

AL GH AT
Live example
<div class="re-avatar-group" role="group" aria-label="5 collaborators">
  <span class="re-avatar" role="img" aria-label="Ada Lovelace">AL</span>
  <span class="re-avatar" role="img" aria-label="Grace Hopper">GH</span>
  <span class="re-avatar" role="img" aria-label="Alan Turing">AT</span>
  <span class="re-avatar re-avatar-group__count" aria-hidden="true">+2</span>
</div>

Accessibility

Section titled “Accessibility”

Avatar is presentational — a <span> with no keyboard interaction or focus ring.

  • Semantics — give every avatar an accessible name. The image variant relies on the native <img alt="…">; the initials variant adds role="img" with aria-label so assistive tech announces the person’s name rather than spelling out the letters. Decorative-only avatars can be omitted from the tree (aria-hidden) where context already names the user.
  • Presence never rides colour alone. The dot’s shape splits present (filled) / offline (hollow) / busy (bar) — a split that also survives Windows High Contrast, where the fills flatten to system colors — and the exact state must reach assistive tech as text. On an image avatar, put an .re-sr-only status word inside the dot (<span class="re-sr-only">Online</span>). On an initials avatar, role="img" makes descendant text presentational — an sr-only word inside the dot would never be announced — so fold the status into the aria-label ("Grace Hopper, away") and leave the dot empty. Online vs away is colour-only visually; the text is the real cue.
  • Group — the aria-label on the role="group" is the source of truth for the total count; the visible “+N” is decorative (aria-hidden). Each avatar carries a page-colour border that reads as a gap between neighbours — under forced colors (where that border colour flattens and box-shadow rings are stripped) it becomes a real CanvasText outline, so the avatars stay individually distinguishable.
  • Notes — the rendered initials are uppercased and unselectable (user-select: none) for presentation; they carry no semantics, which is why the aria-label provides the real name. The muted fallback background meets text contrast for the initials.

See the accessibility guide for the project-wide approach.