Skip to content
StoreA11y

WooCommerce · 2.1.1 Keyboard (Level A)

Server-side image maps are in use on WooCommerce

Some images use a server-side image map (ismap). These require a mouse by definition — the browser sends pixel coordinates — so keyboard and screen-reader users cannot use them at all. There is no way to make them accessible.

Which WCAG criterion this fails

  • Does not meet 2.1.1 Keyboard (Level A)

How to fix it on WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. Take a copy of the theme before editing.

  1. Remove the ismap attribute.
  2. Replace the image map with real links: either a client-side <map>/<area> with alt text on every area, or, better, the image plus a normal list of links beneath it.
  3. On a store this is usually a clickable "shop the look" or store-locator graphic; a list of links is both accessible and better for SEO.

Where this usually lives

Custom HTML blocks in post/page content

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<!-- Inaccessible -->
<a href="/map"><img src="lookbook.jpg" ismap alt="Shop the look"></a>

<!-- Accessible -->
<img src="lookbook.jpg" alt="Model wearing the navy sweater and grey trousers">
<ul>
  <li><a href="/products/navy-sweater">Navy merino sweater</a></li>
  <li><a href="/products/grey-trousers">Grey wool trousers</a></li>
</ul>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: server-side-image-map (axe-core).