AvatarGroup accessibility

WCAG 2.1 AA requirements

Semantics

• The group container has role="group" and an aria-label describing the count (e.g., "Group of 5 avatars").
• Each avatar inside the group retains its own accessible name from AvatarFallback or AvatarImage alt text.

Overflow badge

• The "+N" overflow badge has an aria-label (e.g., "3 more") so screen readers announce the count.
• Ensure the overflow text has 4.5:1 contrast against its background.

Keyboard

• AvatarGroup is non-interactive by default. If you make individual avatars clickable, ensure each one is focusable with a visible focus ring.

Audit checklist

• Group has role="group" and aria-label
• Each avatar has accessible text (alt or fallback initials)
• Overflow badge has aria-label with the count
• 4.5:1 contrast on overflow badge text