Fix image ALT text issue - #819
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Codecov Report✅ All modified and coverable lines are covered by tests. 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
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
| { feature?.image && ( | ||
| <img alt="" loading="lazy" src={ feature.image } /> | ||
| <img | ||
| alt={ feature.label } |
There was a problem hiding this comment.
Not sure the feature label is necessarily the correct alt text to use here but I guess better than having nothing
What?
Fixed: #818
Why?
The feature card image on the AI Home stage rendered with an empty
altattribute (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
altattribute to the feature's label so it exposes a meaningful, human-readable description instead of an empty string:feature.labelis 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
<img>now has a non-emptyaltattribute matching the feature's label (e.g.alt="<Feature name>").Screenshots or screencast
<img alt=""><img alt="<Feature label>">Changelog Entry