Avatar

An avatar is a visual representation of a user, which can contain an image or placeholder graphic.

Accessibility

To implement an accessible PatternFly avatar:

  • Pass in alt as a React prop or HTML attribute to provide alternative text for the avatar image.
  • If you are using an SVG element for the avatar, make sure the SVG is accessible (see How to create accessible SVGs) and reference the different SVG patterns. Screen reader accessibility for SVGs varies based on the pattern being used.
  • If you’re combining an avatar with another component, make sure to check accessibility guidelines for that component as well.

Testing

At a minimum, an avatar should meet the following criteria:

  • How to create accessible SVGs

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Prop
Applied to
Reason
alt="[text describing the avatar]"
Avatar
Provides an accessible description of the avatar. Required

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class
Applied to
Reason
alt="[text describing the avatar]"
.pf-v6-c-avatar
Provides an accessible description of the avatar. Required