Avatar

An avatar is a visual used to represent a user. It may contain an image or a 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.

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

Users can navigate to the avatar via the screen reader.
The avatar image has alternative text.
Any SVGs used are accessible.How to create accessible SVGs
Keyboard users should not be able to interact with the avatar on its own (via Tab and Tab + Shift).

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

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-c-avatar`	Provides an accessible description of the avatar. Required

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH