Avatar

Keyboard

Avatar usually only displays information. The error type also shows its error explanation on keyboard focus.

Semantics

Set label to identify the person, agent or runtime. Use AvatarBadge's statusLabel or StatusDot's label to describe its status. The isMe and isDeactivated props only change appearance; explain them in label or nearby text when needed.

Checklist

• Use label to identify the person, agent or runtime, even if the image cannot load.
• If isMe or isDeactivated needs explaining, add it to label or nearby text.
• Use AvatarBadge's statusLabel and the group name and count to explain the status without relying on color or images.

For contrast, zoom and screen reader checks, see the common accessibility checklist.