Fixing Link Purpose (In Context) on WooCommerce (WCAG 2.4.4)
Where a link goes should be clear from its text, or from the immediate context around it.
Why it matters
Screen reader users often navigate by pulling up a list of every link on the page. If each product card links out with the word 'Details', that list is the same word twenty times over and the catalogue cannot be browsed. The same fix helps search engines understand what each link points at.
WooCommerce — where to look
The theme product loop template; WooCommerce templates/loop/add-to-cart.php.
What to do
WooCommerce can attach the product name to an Add to Cart link, but only when the theme passes an aria-describedby_text argument: it then renders aria-describedby pointing at a span.screen-reader-text. It is NOT on by default. Check your theme supplies that argument, and include the product name in card link text.
Verification status
Checked by reading the platform’s own source code. Template guards the whole mechanism behind isset($args["aria-describedby_text"]).
Reference themes change. If your store runs a different or older theme, confirm the file before editing it.
How to verify the fix
- Use a browser extension to list every link on the page. Read the texts alone — is each destination clear?
- Tab through a product listing and check that at each stop you know where you would end up.
- Look for links with the same text pointing to different places.
Other platforms
- Fixing Link Purpose (In Context) on Shopify
- Fixing Link Purpose (In Context) on Webflow
- Fixing Link Purpose (In Context) on Wix
- Fixing Link Purpose (In Context) on Squarespace
The full criterion
Read the full explanation of WCAG 2.4.4 Link Purpose (In Context), or the formal W3C definition.