Skip to content

Hide audio thumbnail from screen readers#5570

Open
rushikeshmore wants to merge 1 commit into
WordPress:mainfrom
rushikeshmore:fix/497-audio-thumbnail-aria-hidden
Open

Hide audio thumbnail from screen readers#5570
rushikeshmore wants to merge 1 commit into
WordPress:mainfrom
rushikeshmore:fix/497-audio-thumbnail-aria-hidden

Conversation

@rushikeshmore
Copy link
Copy Markdown

Fixes

Fixes #497 by @dhruvkb

Description

The audio thumbnail component (VAudioThumbnail) previously used a title attribute on the wrapper and a dynamic alt text on the <img> element. This was misleading because:

  • The generative SVG fallback (dot pattern) is not actual cover art, but the title read "Cover art for ..."
  • The thumbnail is purely decorative and provides no useful information to screen reader users
  • The title/alt text duplicated information already available in the audio track metadata nearby

Following the approach agreed upon in the issue discussion, this PR:

  1. Adds aria-hidden="true" to the thumbnail wrapper <div>, hiding the entire element from the accessibility tree
  2. Removes the :title binding from the wrapper
  3. Sets alt="" on the <img> element (empty alt for decorative images per WCAG)
  4. Removes the unused helpText computed property and useI18n import

Testing Instructions

  1. Open any audio search results page (e.g., search for "piano")
  2. Inspect the audio thumbnail element in DevTools and verify aria-hidden="true" is present on the wrapper div
  3. Verify the <img> element has alt=""
  4. Verify there is no title attribute on the thumbnail wrapper
  5. Use a screen reader (VoiceOver on macOS: Cmd+F5) and navigate through an audio result to confirm the thumbnail is skipped
  6. Check that the thumbnail still renders correctly visually (both with cover art and with the generative SVG fallback)
  7. Check sensitive content: the visual blur effect still works correctly

Checklist

  • My pull request has a descriptive title (not a vague title likeUpdate index.md).
  • My pull request targets the default branch of the repository (main) or a parent feature branch.
  • My commit messages follow best practices.
  • My code follows the established code style of the repository.
  • I added or updated tests for the changes I made (if applicable).
  • I added or updated documentation (if applicable).
  • I tried running the project locally and verified that there are no visible errors.
  • I ran the DAG documentation generator (ov just catalog/generate-docs for catalog
    PRs) or the media properties generator (ov just catalog/generate-docs media-props
    for the catalog or ov just api/generate-docs for the API) where applicable.

Developer Certificate of Origin

Developer Certificate of Origin

I have read and agree to the Developer Certificate of Origin version 1.1.

The audio thumbnail (both the generative SVG fallback and the cover
art image) is purely decorative and provides no useful information
to screen reader users. The previous title and alt attributes were
misleading, especially for the generative covers which displayed
"Cover art for ..." when no actual cover art existed.

Add aria-hidden="true" to the thumbnail wrapper, remove the title
attribute, and set alt="" on the image element. This follows the
approach agreed upon in the issue discussion.
@rushikeshmore rushikeshmore requested a review from a team as a code owner April 9, 2026 05:18
@rushikeshmore rushikeshmore requested review from krysal and obulat April 9, 2026 05:18
@openverse-bot openverse-bot added 🧱 stack: frontend Related to the Nuxt frontend 🟨 priority: medium Not blocking but should be addressed soon ✨ goal: improvement Improvement to an existing user-facing feature ♿️ aspect: a11y Concerns related to the project's accessibility labels Apr 9, 2026
@openverse-bot openverse-bot moved this to 👀 Needs Review in Openverse PRs Apr 9, 2026
@rushikeshmore
Copy link
Copy Markdown
Author

Friendly nudge — this PR has been open for ~3 weeks without a review. @krysal @obulat would either of you be able to take a look when you have a moment? Happy to adjust anything if needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

♿️ aspect: a11y Concerns related to the project's accessibility ✨ goal: improvement Improvement to an existing user-facing feature 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: frontend Related to the Nuxt frontend

Projects

Status: 👀 Needs Review

Development

Successfully merging this pull request may close these issues.

Audio thumbnail does not have a descriptive alt text

2 participants