Avatar

A visual representation of a user or entity, displayed as an image or initials fallback with proper accessible labelling.

Demo

Review the avatar variants shown below. Observe how each is labelled, how the fallback displays when an image is unavailable, and whether an avatar used purely for decoration communicates anything to assistive technology.

Avatar with adjacent name (decorative image)

Maria Johnson

Standalone avatar (informative image)

Initials fallback

Avatar inside a link

Sam Brooks

What to Observe

Avatars with meaningful identity information carry an accessible name that conveys who or what they represent
Decorative avatars are hidden from assistive technology so they do not produce redundant announcements
The initials fallback provides the same identity information as the image it replaces
Avatars used as interactive controls (for example, a profile link) have an accessible name on the control, not only on the image
Color is not the sole means of conveying identity or status associated with the avatar

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Avatar Container — the wrapping element that establishes the circular or shaped boundary and handles overflow clipping
Image — the photo or illustration representing the user or entity; must carry a descriptive alternative text when meaningful
Initials Fallback — text-based content displayed when the image fails to load or is unavailable; conveys the same identity as the image
Status Indicator — an optional badge or dot overlaid on the avatar to show presence or activity status, which must have a text equivalent

Accessibility Behavior

Provide a descriptive alternative text on avatar images when they convey meaningful identity information, such as a user's name
Mark avatar images as decorative when the person's name or identity is already present in adjacent text, to avoid announcing the same information twice
Ensure the initials fallback conveys the same identity as the image it replaces, either through visible text or an accessible name on the container
When the avatar is part of an interactive control such as a link or button, ensure the control itself carries a clear accessible name describing its destination or action
Any status indicator overlaid on the avatar must have a text equivalent available to assistive technology

Common Mistakes

Using an empty or missing alt attribute on a meaningful avatar image, causing screen readers to announce the filename instead
Marking a meaningful avatar as decorative when it is the only representation of a user's identity in that context
Wrapping an avatar in a link without giving the link an accessible name, leaving keyboard and screen reader users unable to understand the destination
Relying on a colored border or dot to convey status without providing any text alternative for that status
Using initials-only avatars without any accessible name, leaving assistive technology users unable to identify whose avatar it is

Why This Matters

Avatars appear throughout social and collaborative interfaces — comment threads, user lists, profile menus — and are often treated as purely decorative. When an avatar is the only visual cue identifying who posted something or who is online, its information matters. Screen reader users relying on alternative text, and keyboard users activating avatar links, need the same contextual information that sighted users receive at a glance. Correct labelling ensures the identity information embedded in avatars is available to everyone.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.