Web Access Centre

Image maps - Web Access Centre

Summary: Image maps should always have good alt text and alternative text links to each of the hotspots.


Web access centre - design and management resources

Rationale

Image maps are pictures with a number of clickable areas used as navigation. Because of their graphical nature they cause a number of accessibility issues if not constructed properly with ALT text for clickable areas and alternative text links for these areas.

Image maps come in two varieties: server side and client side. Server side image maps should be avoided altogether, as they require people to use a mouse to operate them. This means they will be impossible to use for someone who has limited movement or cannot use a mouse.

Image maps should really be regarded as a visual aid in that the information they contain is provided in an alternative format elsewhere on the page, such as text links. Text links are easier for screen magnification users to access, as image maps can be difficult to navigate around. That said some users, such as people with dyslexia, might find image maps much easier to use than text links.

Techniques

  • ALT text must be provided for the image map as a whole. For example, if the map is of the United Kingdom and its different countries the overall ALT text should be “Map of the United Kingdom”. Each hotspot should then have individual ALT text as described below.

  • AREA ALT text must be given to each AREA element or "hotspot". The clickable area must be given ALT text indicating the target of the link. Using the example of a map of the UK and the four clickable areas of England, Ireland, Scotland and Wales ALT text for each AREA would be “England”, “Ireland”, “Scotland” and “Wales”.

  • Alternative text links must also be provided elsewhere on the page. This benefits users of screen magnification who may not be able to fit the whole map on-screen, or who find it problematic to navigate. It also makes the links accessible to users who do not use a mouse and therefore cannot benefit from the ALT text tooltip.

    Alternative HTML links should be given elsewhere on the page. These are best presented as a correctly marked up list.

Testing tips

Verify image maps have ALT text for the main image and the AREA hotspots. Also check the page for alternative text links.

  • Automated tools can be run over the site to establish if there are any image maps in pages and if there is missing ALT text. Manual checks must then be carried out to assess ALT text and see if there are alternative text links elsewhere on the page.

  • Accessibility toolbar - Go to Images / Show Image Maps.

  • Browser - Go to View - Source - Edit - Find and search for “map” then read the code to see if all links within it have ALT.

Website Accessibility Initiative compliance

  • 1.1 Provide a text equivalent for every non-text element (eg via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (eg animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. Priority 1

  • 1.2 Provide redundant text links for each active region of a server-side image map. Priority 1

  • 9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape. Priority 1

  • 1.5 Until user agents render text equivalents for client-side image map links, provide redundant text links for each active region of a client-side image map. Priority 3

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about images

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41

More info

Quiz

How can you receive Audio Description on TV? Through:





Your stories

JK Rowling's story - when JK Rowling had her website redesigned she asked design agency Lightmaker to push the boundaries of accessible Flash. The original site offered the user an intensely visual experience. The new site needed to keep the explorative and creative elements but present them in a universally accessible way. Find out about the key features of the site and how it was designed. JK Rowling's accessible Flash website - full story