Avatar variant can be used with missing alt text

The Avatar component currently has ~three~ some problems related to alt text:

1. (Accessibility bug, quick win) When no image is visible and disableInitials is true, a fallback icon is used - and this fallback has no alt text. The alt text should be the full name.

2. (UX improvement, possible quick win) When an image avatar is visible, the alt text is a full name. This should probably be available as a tooltip or title as well.

3. (Consistency) Our design docs say alt text should be not used when the name is visible, but there’s no way to toggle this in the API.

   Use with name: Provide a text label showing the individual or group’s name near the avatar when it’s the only place the name is shown. Use an empty alt=“”.

   Use without name: You might skip showing the individual or group’s name when the avatar is shown in a list and linked to a place where the name is shown. For alt text, use their name.

4. (UX improvement, quick win) When showing initials, our “TextFit” algorithm doesn’t display any alt text or tooltip, so screen readers will be read the initials only. They should probably hear the full name, as they would when an avatar image is visible.

5. (Tech debt, accessibility bug, breaking change) As of #1749, it’s possible to specify an avatar with no fullName. I approved this PR and I now wish I’d asked more questions - it allows creating impossible states where no image exists and no name, so no alt text is visible.

   I’m guessing these use cases are relevant to the “When there is no specific individual or group identified, use the default user avatar” use case we describe in our documentation.

API Options

1. An explicit (required) alt: string attribute forcing engineers to make the decision, and they follow the advice in the docs. Could often be set to the same value as fullName but engineers can also set to an empty string if the full name is visible elsewhere.
2. A noAltTextBecauseTheNameIsVisible: boolean attribute.
3. Use alt=${fullName} in most of the relevant places, and be okay with screen readers reading it twice if the name is visible elsewhere.
4. A new nameIsVisibleElsewhere:boolean prop that takes care of alt logic and tooltip logic for us.
5. A new <AvatarWithNameLabel> component that correctly silences alt text (if the designs for this are consistent), and normal <Avatar> has full name as alt text.
6. (possibly in combination with any of the above) A new <DefaultAvatar alt=""> for the use case where no individual or group is specified (point 5 above). Require explicit alt text. Make fullName required on the normal <Avatar> component again (a breaking change)

So many options 😅

[dougmacknz]

Not sure if this issue itself can be classified as a quick win with all the stuff in here 😅. We might want to split this out into its separate issues to make these into a group of quick wins for potential advocate pairing tasks.

[dougmacknz]

@mcwinter07 this got closed due to inactivity. Is there anything here that you didn’t address in your big Avatar work that you think would be worth creating a new issue for?