Skip to main content

AvatarGroup

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

OverviewPropertiesAccessibility

New

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.
Still have questions?
Find answers in the Dynatrace Community