How to build an accessible User in React
The composite is a labelled group; the name provides the accessible identity and the avatar carries its own role="img"/alt — no redundant roles
When to use a User
- Showing a person with their name and a secondary line (email, role) next to an avatar
- Identity rows inside menus, tables, navbars, and account switchers
- A compact, labelled identity primitive too granular for a page-section block
When not to use it
- Just an image with no name/description — use Avatar directly
- A full profile card with rich content — compose a Card instead
Accessibility
Role group, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <User name="" avatarProps={{ src: "/jane.jpg" }} />
Prefer: <User name="Jane Doe" avatarProps={{ src: "/jane.jpg", alt: "Jane Doe" }} />
The name is the accessible identity label; an empty name leaves the avatar unlabelled
Example
<User name="Jane Doe" description="[email protected]" avatarProps={{ src: "/jane.jpg", alt: "Jane Doe" }} />