How to build an accessible Avatar in React
role="img" with alt names the person; on image error it falls back to initials so the identity survives; the status dot carries an accessible label rather than relying on color alone
When to use a Avatar
- Representing a person or entity with a thumbnail image and initials fallback
- Showing presence/status alongside an identity (status prop)
- Compactly identifying authors in lists, comments, and headers
When not to use it
- Decorative imagery unrelated to identity — use a plain <img>
- A generic icon or logo with no person/entity meaning
Accessibility
Role img, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Avatar src="/logo.png" /> with no alt and no fallback
Prefer: <Avatar src="/jane.jpg" alt="Jane Doe" fallback="JD" />
Without alt/fallback the identity is invisible to assistive tech and breaks on image load failure
Example
<Avatar src="/jane.jpg" alt="Jane Doe" />