Data display
Avatar
A person or account: photo, initials or placeholder, with an optional status badge.
Examples
Initials with an accessible name · presence is also in the name
ELMKNRAB
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Image or initials | 44px (Large) | Required |
| 2 | Status dot | 14px, bottom right | Optional |
| 3 | Ring | Optional, for groups | Optional |
Specifications
| Large | 44px image container |
|---|---|
| Status badge | 14px overlay |
Interaction
| Key | Result |
|---|---|
| None | Not focusable unless inside a link or button |
| Trigger | Response |
|---|---|
| Hover | Tooltip with the full name when it is the only identifier |
Accessibility
role · image
1.1.1Non-text Content1.4.1Use of Colour1.4.3Contrast (Minimum)
| Requirement | How Rig meets it |
|---|---|
| Name | role="img" with aria-label = person's name (and presence in words) |
| Presence | A coloured dot alone is not enough: add the word online |
| Initials | Mark as decorative if the name is next to it |
| Contrast | Initials on the fill at 4.5:1 |
Usage
| Do | Don’t |
|---|---|
| Give photos meaningful alt text only when the person is not named nearby | Do not use colour only for status |
| Do not put initials in the accessible name |