Avatar

Avatars are used to represent users, groups, and entities.
  • Examples
  • Properties
  • Accessibility

Examples

To render an avatar, apply the class chi-avatar to a div element and place an image inside.

Customizations

Web Component

Properties

Web component coming soon

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the avatar element if it is interactive (e.g., a button or link).
Shift + TabMoves focus to the previous focusable element if it is interactive.
Enter,SpaceActivates the avatar action if it is a button or link.
EscCloses any associated popovers or tooltips.

For detailed keyboard interactions, refer to our Keyboard Control Guide.

Visit WebAIM for general keyboard techniques.

Guidance for developers
  • If the avatar acts as a button or link, ensure it has the appropriate role and is keyboard-focusable.
  • Use aria-label or aria-labelledby to provide a meaningful description for screen readers.
  • If the avatar represents a user, ensure there is alternative text via alt on the img element or an aria-label.
  • Implement ARIA live regions for dynamic avatar updates, such as changes in profile images.
  • Ensure high contrast between avatar content and background to support low-vision users.
Guidance for designers
  • Ensure avatars are distinguishable from other elements and maintain a minimum size of 44x44 pixels, as recommended by WCAG 2.5.5.
  • Provide alternative visual indicators for avatars (e.g., initials, icons) when an image is unavailable.
  • Use sufficient contrast between avatar background and foreground elements.
  • Ensure avatars have clear focus states when interactive (e.g., a visible outline or border).
  • Maintain consistent spacing and alignment to enhance visual clarity.

Explore live examples in the ARIA Practices Guide.

Resources

  • Mozilla Resources for Developers: Information about the img role and accessible image usage.
  • W3C Decision Tree: A guide to choosing appropriate alt text for images.

Other recommendations

Find additional accessibility tips in our Accessibility Guide.

WCAG 2.2 Guidelines

  • Non-text Content: Ensure all badges conveying information have a text alternative. (Level A)
  • Info and Relationships: Maintain semantic structure for screen readers. (Level A)
  • Headings and Labels: Ensure badges have meaningful labels. (Level AA)
  • Labels or Instructions: Provide clear instructions for dismissible badges. (Level A)
  • Name, Role, Value: Define ARIA attributes correctly for badges. (Level A)