Skip to main content

Avatar

Avatar is used to represent a user or group of users using an image. It can also convey additional information about the user like login status, busy, away etc. The avatar can also be used as a link to a profile page.

Design Hints
Avatars are a great way to personalize the user experience. Avatars can be used to convey states of the user (available, busy, away, logged out, etc.) . A common use pattern for avatar is that it acts as a link to a profile page, but new users may not be aware of this and may need hints.
Accessiblity Hints
Ensure that the avatar image has an alternative text which describes the user. If using an avatar as a link, ensure that the link has a descriptive text which can be read only by screen readers or using proper aria-label. If user state is conveyed using the avatar, ensure that the state is also conveyed in a way that can be read by screen readers .

Simple Avatar

A set of default avatars which can be used. The first one is a default avatar, the second one is a placeholder avatar, the third one is an avatar with name. The second row has the same types of avatars but with links.

Avatar with State

The simple avatar but with extra state information. The states available out of the box are

  • Available - green
  • Busy - red
  • Away - yellow

Avatar with State And Ring

These avatars are similar to the previous one, but an additional ring is added to the avatar.

Avatar Groups

The avatar group allows you to show multiple avatars stacked together in a group. Using every avatar in the avatar group as a link is not recommended since the clickable area is limited. The recommended approach is to show the list of people when the link/button ( the +22 link in the example below) on the avatar group is clicked from which further actions can be taken.

Accessibility Testing Status

ComponentNVDAWindows NarratorWAVEAxeIBM Equal Access
Simple AvatarYesYesYesYesYes
Avatar with StateYesYesYesYesYes
Avatar with State And RingYesYesYesYesYes
Avatar GroupsYesYesYesYesYes

Note that there are no defined accessibility guidelines for the avatar pattern described by WAI-ARIA APG, so ravixUI implements accessbility for avatars keeping in mind the patterns for the role=img and the accessbility patterns for <a> tag where appropriate.