Tip:
Highlight text to annotate it
X
Image maps, as the name suggests,
are images and are similar to functional images
but instead of having a single-click action
they can have multiple-click actions.
Prior to this description if you didn’t know what an image map was
it is probably safe to say you didn’t create one
and you only need the following information
if you are evaluating content that someone else has created.
I can’t guarantee it but you will probably be able to say
N/A for Section 508 checkpoints e and f.
Continue with this short tutorial to verify.
If we are speaking of course content,
while it is possible for HTML,
created within the Moodle HTML editor
or text boxes to contain an image map,
it is highly unlikely.
You can’t create one by accident
and there is no mechanism within
the Moodle HTML editor to create one;
you would need programming experience
or an application external to Moodle to create one.
I don’t think mage maps are used as heavily now
as they once were and I’ve not created one in so long
that I did a search to look for a good example to use
that might be seen in an educational setting
(since an educational audience is who this presentation was designed for).
Wikipedia actually uses a public domain image of,
“The Club” which portrays nine members of a literary party.
An image map would create a clickable region, or hotspot,
demonstrated in the teal-blue color, over every individual
in the image so that you could click, or hover,
to read information pertaining to that hotspot.
Unfortunately, for Section 508 compliance,
unless there is text on a page that tells you you can click on something
within a picture, you can’t tell simply by looking at an image
whether it is a single-click, functional image,
or if it is a multiple-click, image map.
You should be able to tell if something has the potential
to be an image map but you’d have to check to be sure.
You either need to look at HTML code,
or you use an evaluation tool on the page
and look for information that identifies the image as an image map.
HTML can contain a lot of information
so a targeted evaluation is recommended,
in which case I would suggest the Firefox plug-in, Firebug.
However, an easier way, dependent on the amount of images
and other content on a page, is to use the Firefox WAVE Toolbar.
We will ignore identifying through HTML and focus
on using WAVE. For a video introduction of the
Firefox WAVE Toolbar go to
[link on screen]
Here are the five WAVE icons to look for,
that will tell you if a course or webpage has an image map.
The first, ERROR Image map missing alternative text,
and the second, ERROR Image map area missing alternative text,
definitely need remediation.
The third, ERROR Server-side image map,
we will look at in just a moment.
The fourth and fifth should be evaluated similarly
to evaluating functional images; do the alternative texts
convey equivalent information and/or function of the link.
Now we’ll look at the specific checkpoints.
e) Redundant text links shall be provided for
each active region of a server-side image map.
The actual pass/fail criteria from WebAIM indicates
that you should use client-side instead of server-side image maps.
This is highly encouraged since the checkpoint
was written when it was more difficult
to create non-geometric shape hotspots.
If we look at this example for a server-side image map
of "The Club," every one of the individuals in the portrait
is a clickable hotspot.
If we go to the WAVE Toolbar, Errors, Features, and Alerts
you'll see that it does detect two accessibility errors.
One of them actually is that a server-side image map is present.
Now Section 508 e actually talks about redundant text links
and that's what these links are at the bottom of the page.
So while it would be better to use a client-side image map,
the fact that there are redundant text links
for each individual in the portrait, passes the criteria.
f) Client-side image maps shall be provided instead of
server-side image maps except where the regions
cannot be defined with an available geometric shape.
So what do they mean when they say “cannot be defined
with available geometric shape?”
If we go back to our original image, “The Club,”
we can look at what would have been hotspots
in the very earlier days of client-side image maps.
Everything would have been squares or rectangles or circles.
Notice there are areas that are covered by the rectangular hotspots
that cover areas of background and there are a few areas
that could still be areas of a person that aren’t actually covered.
Later applications allowed you to create irregularly-shaped
polygons as seen in our previous example of hotspots.
Even the following United States map example
is now possible as a client-side, instead of server side,
image map. This last example does show redundant text links
as it might be difficult for someone with a visual disability
to distinguish when an area is selected.
So here's a client-side image map,
again were looking at "The Club,"
and each one of the individuals is a clickable hotspot.
If we go to the WAVE Toolbar, Errors, Features, and Alerts
and click. We'll see it detects accessibility features
and down at the bottom you will notice the Image map alternative text,
and Hotspot alternative text.
So this client-side image map passes for Section 508 f.