Fix empty links
Empty links have an href but no text a screen reader can read, often because the link wraps an image with no alt.
Icon links and linked photos are announced only as link, so nobody knows where they go.
Steps
- Find anchors with no text and no image alt.
- Add text or an alt that names the destination.
- Do not leave an empty anchor as a hit area.
Failing example
A linked product image with an empty alt.
Better example
The link's name is the product name.
Shopify
In the Shopify product card, output the product title inside the anchor or set the image alt to the product title. Icon links in the header need visually hidden text.
WooCommerce
WooCommerce loop templates should print the product name inside the link. Do not wrap a nameless image only.
WordPress
If a block links an image, fill the image alt or add link text. Delete empty anchors left by removed text.
Wix
In Wix, select the linked image and set alt text, or add a text label on the button.