Loading... Please Wait...
Loading... Please Wait...

Search Support

Search our knowledgebase? Enter keywords or article id:

> go to search support

Support Index

Help and Support

PixelMill Live Help


Enter keyword or id#:



Quick Links

Printable Article

Accessibility - Part 3

Article ID: KB101566

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


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:

Not helpful Very helpful
1 2 3 4 5 6 7

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://shop.pixelmill.com/support/al1076/kb101566.htm
permalink to this article: http://shop.pixelmill.com/support/kb101566.htm

Back to top

PixelMill EDU


PixelMill EDUâ„¢ is an innovative and proprietary online training series designed to aid the do-it-yourself Web builder in transitioning to new Web editors, coding standards, and Web technologies.

Webinars and Seminars:

FrontPage to SharePoint Designer Series
This is a 6-Week series designed to give you strong exposure to the new SharePoint Designer web editor and interface, along with examples of working with Windows SharePoint Services and tips for transitioning from FrontPage.
Register Now!

Tables to Tableless CSS Series
This is a 6-Week series designed to help you transition from building Tables-based Web site layouts to working with CSS to edit and build Tableless Web site layouts. For all Web builders using Dreamweaver, Expression Web, or any other web editor.
Register Now!

FrontPage to Expression Web Series
This is a 6-Week series designed to give you strong exposure to the new Expression Web software and interface, along with tips for transitioning from FrontPage.
Register Now!

Learn more and register!



Contact Us

Phone: (866) PIXELMILL
(866) 749-3564
Int'l phone: 1 (530) 297-3662

105 E St, Suite 310
Davis, CA 95616 USA

Payment Methods

Visa Mastercard American Express Discover PayPal Personal check Purchase Order