Avatar

StrataKit MUI modifications

• Restyled using StrataKit’s visual language.
• The default size has been decreased.
• Requires a nested <abbr> for initials.
• Includes full forced-colors support.

Examples

Initials

If an image isn’t available, display an individual’s initials as a single character in an <abbr> element with an aria-hidden="true".

If an accessible name is not provided by other means, apply role="img" to the Avatar and set aria-label to the individual’s full name so assistive technologies announce the name instead of the initials.

Icon

Icon Avatars are useful in cases where an image is not available or when a more abstract representation is desired.

Decorative

In some cases, the Avatar may be considered presentational, since text identifying the individual or organization is available separately. In these cases, just omit the alt and aria-label props and the Avatar will not be identified programmatically.

✅ Do

• Supply an image for the Avatar if available.
• Use a correctly sized image in a high performance format like avif or webp.
• If an accessible name is not provided by other means, supply a name using alt for <img> Avatars and aria-label for role="img" Avatars.
• Display a single character initial if an image is not available.

🚫 Don’t

• Don‘t resort to displaying initials if an image is available.
• Don’t omit an accessible label if there is no other label in place.