General
- Provide meaningful alternative text for all avatars
- Do not rely on avatar colour alone to convey information
- Ensure avatar groups can be navigated and understood by screen readers
Screen reader announcements:
Examples of proper announcements:
- Individual avatar: "John Smith, image"
- Interactive avatar: "View John Smith's profile, button"
- Avatar Group: "Team members: John Smith, Maria García, David Chen, and 3 more"
- Overflow: "View 3 more team members, button"
React Native
Individual avatar
Provide clear accessibilityLabel that identifies the user or entity.
Key properties
- accessibilityLabel: User's full name or entity name (required)
- accessibilityRole: Use "image" for avatar representation
- accessibilityHint: Optional context for interactive avatars (e.g., "Tap to view profile")
Avatar with supporting text
When displaying an avatar with adjacent text (name, role), structure properly.
Avatar Collection
Avatar collection requires careful accessibility handling.
Key considerations for Avatar Groups:
- Announce all members when the group is non-interactive
- Include overflow count in announcement (e.g., "and 3 more")
- Set accessible={false} on individual avatars when using a grouped announcement