Semantic Img Links
Serious - WCAG Level AA
What the issue is:
This rule flags links which contain an <img> element when the link's accessible name (often the img's alt text) doesn't accurately describe the action or destination of the link. For example, an image of a shopping cart with alt="cart icon" inside an <a> that goes to /cart does not tell screen reader users that activating the link will "View cart".
Why it matters:
Screen readers and other assistive technologies derive a link's accessible name from its contents (text nodes, img alt, aria-label, aria-labelledby). If the accessible name describes the graphic rather than the link purpose, users who rely on non-visual cues will not know what activating the link does. Keyboard-only users and voice control users depend on clear link names to decide whether to follow a link.
How to fix it:
Determine the link purpose (e.g., "View cart", "Edit profile", "Download PDF").
If the image is the only visible content in the link, make the image's alt attribute convey the link purpose (alt="View cart") so the accessible name is correct.
Alternatively, keep the img alt empty (alt="") if the image is decorative and provide the link name on the anchor instead (visible text or aria-label/aria-labelledby on the <a> element). Example: <a href="/cart" aria-label="View your shopping cart"><img src="cart.svg" alt=""></a>
Prefer visible text (with appropriate styling) where feasible to help all users; if visible text is not desired visually, include visually-hidden text (e.g., .sr-only) inside the link so the accessible name matches the action.
Test with a screen reader (NVDA, VoiceOver) and keyboard navigation to confirm the link announces the intended action.
Best practices:
Prefer concise action-oriented labels ("View cart", "Open profile", "Download invoice").
Localize alt/aria-label text. Use aria-labelledby when the name is composed from nearby text.
Avoid relying on title attributes alone as many ATs do not expose them reliably.
Common mistakes to avoid:
Leaving alt text that describes the image ("cart icon", "company logo") instead of the link purpose
Setting aria-label on the <img> rather than on the link
Using empty alt without providing a label on the link; relying on surrounding visual context that isn't accessible
Using CSS background images for critical links without accessible text.