Avatar

Also called profile picture, user image, gravatar, monogram

A small image representing a person or entity, with a text or icon fallback when no image exists.

Example

Here the image is alt="". The name is already there in text — giving the image the same name makes a screen reader announce the person twice.

ALGHATassigned to this issue

Now nothing else carries the name, so alt does — and the initials fallback needs a label too, because “AT” is not a person's name.

A row or card needs to say whose it is at a glance — comments, assignees, activity feeds.
The same person appears repeatedly and the picture becomes faster to recognise than the name.
Space is tight and a face carries the identity that a truncated name cannot.

The name is the information. A list of one person's own files does not need their face on every row.
The identity must be unambiguous — avatars are small, similar, and two colleagues with the same initials look identical.
You are using it as decoration. An avatar with no account behind it is a coloured circle pretending to be data.

Recognised faster than text once a person is familiar.
Survives truncation: a 32px circle says as much in a narrow column as a cut-off name.
Stacks well for “who is on this” without listing everyone.

Most accounts have no image, so the fallback is the real design problem.
Initials collide, and colour alone does not distinguish two people reliably.
Loading a photo per row costs requests and can shift layout if the box is not reserved.

What this pattern needs in order to work for everyone.

Keyboard: An avatar on its own is not interactive and should not be focusable.
If it opens a profile or a menu, the button wraps the avatar — the image is not the control.
Roles and state: When the name is already next to it, the image is decorative: `alt=""`. Repeating the name makes a screen reader say it twice.
When the avatar stands alone — a stack of assignees, a comment header with no name — `alt` carries the person's name, because nothing else does.
The initials fallback is text, so it is read automatically. Mark the coloured circle behind it `aria-hidden`.
Focus: Nothing special. The failure to avoid is making a non-interactive avatar focusable, which adds a tab stop that does nothing.

GitHub — Identicons rather than initials — generated from the account id, so two users never collide.
Linear — Initials on a colour derived from the name, with the photo replacing it when one exists.