Understanding Accessibility

Guideline 1 - Provide equivalent alternatives to auditory and visual content

Checkpoint 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

If you are using a server side image map you must provide text links which link to the same pages. This is because some assistive devices don't support server-side image maps.

How do I do it?

The same way as for server-side (checkpoint 1.2) - add in extra links into your code to the appropriate pages. You can then style these to be invisible using CSS styles so that they don't appear to those not using assistive devices.

display: none; and visibility: hidden; is used in CSS to not display content that is actually in the page. Unfortunately, however, this is not available to some screen readers, who may require it. The code below simply uses a width and height of 0 pixels, turns off the overflow and absolutely positions the code. This coding allows the screenreader to access the 'invisible' content.

hiding content example

Give the surrounding <div> tag an id of extralinks.

<div id="extralinks">
<a href="index.htm">home</a>
<a href="about.htm">about</a>
<a href="contact.htm">contact</a>
</div>

Then style the <div> with css as below:

#extralinks{
overflow: hidden;
position: absolute;
height: 0px;
width: 0px;
}

How do I check that it meets the WCAG criteria for Checkpoint 1.5?

Run your page through webXact's accessibility checker to validate this checkpoint automatically.

guideline 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14