• Home
• org.sonarsource.sonar-web-plugin
• sonar-web-plugin
• 2.4
• source code
• ServerSideImageMapsCheck.html

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

org.sonar.l10n.web.rules.Web.ServerSideImageMapsCheck.html Maven / Gradle / Ivy

The ismap attribute in an img tag creates a server-side image map: The browser sends the coordinates of the clicked point to the server.
For any person who cannot use a mouse, this form of navigation is inaccessible because it is the position of the cursor on the image that determines the action.


On the other hand, client-side image maps, which use the usemap attribute allow for each clickable area to specify an alternate text, enabling accessibility for the blind.
Further, in terms of separation of concerns, it is definitely better to leave the task of mapping pixels to links to the client.


Noncompliant Code Example

<a href="click_on_world_map.php" target="_self">
  <img src="world_map.png" ismap>                   <!-- Non-Compliant -->
</a>


Compliant Solution

<img src="world_map.png" usemap="#world_map">       <!-- Compliant -->

<map name="world_map">
  <area shape="rect" coords="0,0,10,10" href="france.html" alt="France">
  <area shape="circle" coords="20,20,10" href="spain.html" alt="Spain">
  <area shape="circle" coords="30,30,8" href="england.html" alt="England">
  <!-- ... -->
</map>