Avatar examples

This page shows examples of George’s Avatar component used in practice.

Accessibility

Adding an aria-label to the Avatar component improves accessibility by providing screen readers with a clear description of what the Avatar represents. When used in Transaction, the label could be the textual representation of the transaction category, e.g. ariaLabel="Other expenses". If the Avatar displays a user’s profile picture, you can include the name, e.g. ariaLabel="John Doe"; but if the name is already part of the UI, the Avatar can be kept decorative, i.e. without ariaLabel.

Providing a label ensures that visually impaired users can easily understand its purpose. Additionally, the role="img" is automatically applied to the Avatar, signaling to screen readers that it functions as an image. Also, without it, the label would not be announced at all. The label adds meaningful context that the role alone cannot provide. Together, these features improve the clarity and usability of the Avatar for all users.