Gebruik geen server-side image maps

Hoe los je dit op?

Verwijder het ismap-attribuut van <img>-elementen. Vervang server-side image maps door een van deze toegankelijke alternatieven:

<a href="/map-handler">
  <img src="map.png" ismap alt="Productcategorieën" />
</a>

Gebruik in plaats daarvan een client-side image map met <map> en <area>-elementen:

<img src="map.png" alt="Productcategorieën" usemap="#category-map" />
<map name="category-map">
  <area shape="rect" coords="0,0,100,100" href="/electronics" alt="Elektronica" />
  <area shape="rect" coords="100,0,200,100" href="/clothing" alt="Kleding" />
</map>

Of vervang de image map door gewone links of knoppen die visueel overeenkomen met het ontwerp:

<nav aria-label="Productcategorieën">
  <a href="/electronics">Elektronica</a>
  <a href="/clothing">Kleding</a>
</nav>

Waarom is dit belangrijk?

Een server-side image map vereist een aanwijsapparaat om te bepalen welk gebied is aangeklikt. Gebruikers die alleen een toetsenbord gebruiken kunnen gebieden van een server-side image map niet activeren. Dit maakt de navigatie volledig ontoegankelijk voor mensen met motorische beperkingen of voor iedereen die een toetsenbord gebruikt.