The avatar should have a text equivalent. Use the
accessibilityLabel prop to ensure there is a text description for the image. The VoiceOver description will default to the
name prop if
accessibilityLabel is not provided.
Make sure that the alternative text properly describes the information and function of the avatar image(s). Depending on the situation, it may be helpful to state the collaborator or company name and/or their verification status.
Be sure to localize any content in the
accessibilityLabel that isn’t a name.
Avatars without a
size prop will expand to fit the width of their parent container. A common use case is to achieve column-based sizing.
Resize the browser to see these Avatar change to match the width of the
Column they have been placed in.
Without an image
If there is no image source provided to the Avatar, the first character of
the name provided will be used as a placeholder.
For users with verified accounts, use the
verified prop to add a checkmark. Be sure to update the
accessibilityLabel to include this information as well.