AvatarGroup

The Avatar component can be used as a visual representation of multiple users.

OverviewPropertiesAccessibilityUsageChangelog

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Accessible names and roles

Each avatar in the group must have an accessible name matching the individual's full name.

• Do provide each avatar with an aria-label set to the individual's full name.
• Do use a Tooltip on each avatar to surface the full name visually. Ensure that the tooltip text matches the aria-label exactly.
• Don't let the tooltip text and aria-label differ.

Keyboard accessibility and focus

AvatarGroup handles focus management out of the box. The focus can be moved with the arrow-left and arrow-right keys, as well as the tab key. When the overflow trigger is activated, focus moves into the revealed list; when the list closes, focus returns to the trigger.

• Do ensure the revealed content has a meaningful accessible name.
• Don't override the component's built-in focus handling. Focus must move into the revealed list when it opens, and return to the trigger on close, so screen readers can announce the state change correctly.

State announcements

AvatarGroup handles state announcements out of the box: aria-expanded="true" when open; aria-expanded="false" when closed.

• Do ensure the revealed list follows in a logical tab order so users can navigate into it after the state is announced.