Avatar - Image Alt text Accessibility

[harrisonwillettbetterworks]

Describe the bug

The Avatar component has a WCAG SC 1.1.1 failure found here:

primevue/components/avatar/Avatar.vue

Line 6 in 6267225

<img v-else-if="image" :src="image" @error="onError" />

When running Axe Dev Tools on an Avatar component with an image a failure of SC 1.3.1 is shown. There are a few solutions to this including adding alt text :aria-label="ariaLabel" or adding a role like role="none" or role="presentation". I can see potential issues with either option depending on the implementation in an application. You may want to provide the option to choose which is used depending on design pattern.

Proposed Fix

• <img v-else-if="image" :alt="ariaLabel" :src="image" @error="onError" />
• <img v-else-if="image" role="presentation" :src="image" @error="onError" />

PrimeVue version

3.22.4

Vue version

3.x

Language

TypeScript