Skip to content

Fix image ALT text issue - #819

Merged
dkotter merged 2 commits into
WordPress:developfrom
monzuralam:develop
Jul 6, 2026
Merged

Fix image ALT text issue#819
dkotter merged 2 commits into
WordPress:developfrom
monzuralam:develop

Conversation

@monzuralam

@monzuralam monzuralam commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

What?

Fixed: #818

Why?

The feature card image on the AI Home stage rendered with an empty alt attribute (alt=""), which marks the image as decorative. Since the image illustrates the feature the card represents, it carries meaningful content and should expose an accessible name. As written, screen reader users get no information about the image, failing WCAG 1.1.1 (Non-text Content).

How?

Set the image's alt attribute to the feature's label so it exposes a meaningful, human-readable description instead of an empty string:

- <img alt="" loading="lazy" src={ feature.image } />
+ <img alt={ feature.label } loading="lazy" src={ feature.image } />

feature.label is already the user-facing name for the card's feature, so it stays in sync with the displayed content and is localized alongside the rest of the card.

Use of AI Tools

No

Testing Instructions

  1. Open the AI Home settings screen where the feature/showcase cards are displayed.
  2. Inspect a feature card image in the browser DevTools.
  3. Confirm the <img> now has a non-empty alt attribute matching the feature's label (e.g. alt="<Feature name>").
  4. Optionally, verify with a screen reader (VoiceOver / NVDA) that the image announces the feature label rather than being skipped or read as an empty/decorative image.

Screenshots or screencast

Before After
<img alt=""> <img alt="<Feature label>">

Changelog Entry

Fixed - Added descriptive alt text to AI Home feature card images for improved screen reader accessibility.

Open WordPress Playground Preview

@monzuralam
monzuralam requested a review from a team July 2, 2026 16:51
@github-actions

github-actions Bot commented Jul 2, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: monzuralam <monzuralam@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@codecov

codecov Bot commented Jul 2, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.50%. Comparing base (9db55ee) to head (66e50d3).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files
@@            Coverage Diff             @@
##             develop     #819   +/-   ##
==========================================
  Coverage      75.50%   75.50%           
  Complexity      2086     2086           
==========================================
  Files             99       99           
  Lines           8626     8626           
==========================================
  Hits            6513     6513           
  Misses          2113     2113           
Flag Coverage Δ
unit 75.50% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@dkotter dkotter added this to the 1.2.0 milestone Jul 6, 2026
Comment thread routes/ai-home/stage.tsx Outdated
Comment thread routes/ai-home/stage.tsx
{ feature?.image && (
<img alt="" loading="lazy" src={ feature.image } />
<img
alt={ feature.label }

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure the feature label is necessarily the correct alt text to use here but I guess better than having nothing

@dkotter
dkotter merged commit 53f5dba into WordPress:develop Jul 6, 2026
26 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Missing alt text on feature card image in AI Home stage

2 participants