Audio thumbnail does not have a descriptive alt text

[obulat]

Problem

Alt attribute on the audio thumbnail image does not describe the image.

Description

A descriptive alt attribute should be provided when possible.

Additional context

Reported by Joe Dolson (https://make.wordpress.org/openverse/2022/09/07/frontend-release-v3-4-8-and-a-call-for-a11y-testing/#comment-95)

Implementation

• 🙋 I would be interested in implementing this feature.

[dhruvkb]

Does the audio thumbnail have any inherent value for someone using a screen-reader? Rather than the alt text being "Thumbnail for track <insert track name here>" (which will almost always be read in close proximity to the track name), I would much rather that the image was ARIA-hidden entirely.

Tagging @panchovm for UX guidance.

[zackkrida]

Looks like SoundCloud uses the track name as the alt text 😢

[obulat]

Ideally, we would have the descriptive texts for the thumbnails. But since we don't, I agree that aria-hiding the thumbnail element is a better solution.
Would we add aria-hidden="true" to the div that wraps both the fallback and the image here (instead of adding the title):
https://github.com/WordPress/openverse-frontend/blob/940b686b387e3fcc86a32dd6fdab15a60cc1b19b/src/components/VAudioThumbnail/VAudioThumbnail.vue#L3

[dhruvkb]

@obulat that seems ideal. By doing that, to an SR, it would seem as if there is no thumbnail.

[zackkrida]

The suggested approach here sounds good. Let's hide the artworks from screen readers. Currently we show title='Cover art for "Wild Dog & White Rose" by Régis V. Gronoff' even if displaying our generative covers, which is misleading.

[kvdotkirti]

@obulat I would like to attempt resolving this issue, could you please assign it to me?