Skip to content
StoreA11y

Shopify · 2.1.1 Keyboard (Level A)

Server-side image maps are in use on Shopify

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 Shopify

Everything below is done from Online Store > Themes > Edit code. 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 Liquid blocks, legacy sections carried over from an older theme

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). 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).