Accessibility - Part 3
Article ID: KB101566
/images/newsletter/accessibility-3.gif)
Last month we talked about how to conform your images to the
first web content accessibility checkpoint, which was:
Checkpoint 1.1 Provide a text equivalent for every
non-text element (e.g., via "alt", "longdesc", or in element
content). This includes: images, graphical representations of text
(including symbols), image map regions, animations (e.g., 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]
Now that you know how to take your images and make them
accessible, what about image maps, animations, applets, and all
those other things that add pizzaz to your web page? We'll be
covering these in the next couple of articles.
Image maps...
If you're not sure what an image map is, here's a quick
explanation. An image map is one image with one or more "hotspots"
defined. These hotspots can be linked to other pages. FrontPage's
Picture Toolbar has hotspot tools that allow you to create a "client
side" FrontPage Image map.
Here's an example of a client-side image map...
If you look at the HTML code, you'll see something like:
<MAP
NAME="umbrellamap">
<AREA HREF="/"
SHAPE="rect"
COORDS="23, 77,
110, 124">
<AREA HREF="/support/"
SHAPE="rect"
COORDS="121, 72,
206, 116"></MAP>
<IMG BORDER="0"
SRC="../diagrams/hotspot_01.jpg"
USEMAP="#umbrellamap"
WIDTH="216"
HEIGHT="134">
This is all well and good for viewers who can see the picture,
but if you want to make this accessible, you'll have to provide
text equivalents for the picture as well as the hotspots.
How to: Alternative text for image and hotspots
This is easy to do! First, define the "alt" description for the
image, as described in last month's article. Then, go into HTML view
and add "alt" descriptions to each of the <AREA> tags, like this:
<MAP NAME="umbrellamap">
<AREA TARGET="_blank" HREF="/" SHAPE="rect" COORDS="23, 77, 110,
124" ALT="Umbrella 1 - Link to
PixelMill Home">
<AREA HREF="/support/" SHAPE="rect" COORDS="121, 72, 206, 116"
ALT="Umbrella 2 - Link to PixelMill
Support"></MAP>
<IMG BORDER="0" SRC="../diagrams/hotspot_01.jpg"
USEMAP="#umbrellamap" WIDTH="216" HEIGHT="134"
ALT="Click on umbrellas...">
Server-side image maps are similar to what is described
above, except that the map information is in a separate file on the
server. This means that there is no real way to make the image map
itself accessible. Your only way out is to create some text links on
the page that link to the same places as an alternative for those
who can't use the image map.
FrontPage and Accessibility
While FrontPage makes it easy for you to create [client side]
image maps, it's up to you to make the image map accessible. You can
easily do this in HTML view following the example above!
Next: Flash & Swish Movies
Contributors
Corrie Haffly:
Corrie is the author of the Accessibility series, which appeared
in the PixelMill Newsletter. Though you may not know her name,
Corrie has become one of the top experts in the FrontPage Template
industry. You may know her work better under the name John Galt's
Templates. See Corrie's stunning products today!
John Galt's Templates
John Galt's Tools, PixelMill Newsletter, Volume 2 - Issue 7 : 07/01/2002
Back to top
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. Your email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1076/kb101566.htm
permalink to this article:
http://www.pixelmill.com/support/kb101566.htm
Back to top