Veine,

Ryan's mentioned a few good arguments against image maps - maintenance and
load time. I think there is a far bigger issue that was touched on but not
explored - accessibility.

<start long rave>

Many people assume that accessibility means blind users with screen readers.
However, accessibility is about making content more accessible to DEVICES
(browsers, text based browsers, hand held's, search bots, printers, fridges)
and the full range of USERS (normal users, blind, vision impaired, mobility
impaired, intellectually impaired etc).

While blind users with screen readers can jump across an image map using the
link descriptions, this doesn�t help a lot of other disadvantaged users. By
far the biggest group of users who are handicapped in some way are vision
impaired users. This ranges from people with poor eye sight to extremely
poor eye sight and also colour blind users.

Most of these people find it harder to access images that html text. If you
can provide main navigation is text, then they have the ability to scale
this content to suit their needs. Images can be zoomed in certain browsers
(although they become very pixelly in the process), but do not scale with
the users default font size.

The Web Content Accessibility Guidelines 1.0 Priority 2 checkpoints 3.1
states: "When an appropriate markup language exists, use markup rather than
images to convey information. "

The other issue is devices, and how they will deal with a large lump of an
image map.

Navigation images and image maps are not as flexible as html text for
devices like hand helds' where screen real estate is much smaller, or
printers, where you may wish the content to appear in a different way, or
not at all. When you use text, you have much more flexibility. You can style
content to look entirely different in different devices.

Finally, there is the most important device from your clients point of view
- search bots - the ultimate blind user. They come to your site to consume
your content. If it is marked up with clean obvious semantic code, there is
a better chance of your content being consumed and indexed. This means using
the best HTML elements for the job. <h1> for headings, etc.

If your entire page is an image map, then the content is much harder to
access and index. In fact, if you look at the source of your site, the main
heading on your page is actually a message to users of older browsers:

"This site will look much better in a browser that supports..."

>From a search bots point of view, an important "take home" messages of your
site are your headings. As you can see, this sort of content is consumed and
indexed:
http://www.google.com/search?q=This+site+will+look+much+better+in+a+browser+
that+supports&ie=UTF-8&oe=UTF-8

Ideally, content should be looked at semantically first (marked up with the
best html element for the job), then styled to suit your needs rather than
styling first, then tweaking to make it slightly more accessible. This is
achievable to a large degree with CSS now that it is supported well across
most modern browsers.

Using this method, you would look at your page and decide what the content
block are, and how best to mark them up. H1's for headings, lists for
navigation, paragraphs of text for news etc. Then, you can move these chunks
of semantically correct content around, position them and style them to suit
your needs using CSS.

</end rave>
Russ



> At 10:55 PM 2/2/2004 -0500, you wrote:
>> Where to begin...
>> 
>> I was going to quote Zeldman's orange book, being the little Zeldmanite I
>> am, but I'll go freestyle in the hopes that I get his concepts well enough
>> by this point in time! ICK ;)
>> 
>> Image maps have (for the most part) fallen out of grace. I used to use
>> them at one time (actually, right up until I cracked my ass down on all
>> this standards hoopla and learned more techniques), but have since
>> deviated away from tables all together for the most part and use div
>> layouts. Anyhows, back in my table days I got pretty good with chopping
>> them up just right and piecing them back together again. To make a short
>> story shorter, I found that dicing up the image map into separate chunks
>> using GIF compression made for a quicker load time than using one solid
>> bar. It also carried the benefit of not having to rework an entire site
>> when I wanted to add one new link to a feature on the navigational area.
> 
> In this case there is no rework until the redesign, client wants to keep it
> the same way for 2-4 years and then change again, the long term goal is to
> keep the site fresh. However I will today take the time to redo the bar and
> cut it up to see what can be done there in the question about loadtime
> 
>> If you're talking HTML filesize, going to chunked linked images will
>> usually save a few bytes as well.
> 
> Can not be much and probably something that I will not even look at
> 
>> It's also a pain to generate new coordinates each time you need to change
>> the map areas.
> 
> True, but a little free-ware program I have those image maps take less then
> a min a piece to rewrite.
> 
>> If you're a sucker for accessibility (like I am) image maps also do not
>> permit navigation to screen readers.
> 
> I thought they did, IF you provide a description with the link, no?
> 
>> Summary: nixing image maps will save you trouble, time, and redesign
>> strife somewhere along the road, ane probably lead to smaller load times
>> as well.
> 
> Will try it today.
> 
>> --Ryan
>> http://www.theward.net
>> 
>> PS - things to keep in mind: I code by hand, despise complex table
>> layouts, and live life and web design by the "Keep It Simple Stupid" motto.
> 
> Is there anything BUT coding all by hand? ;o) I don't know about it in any
> case :op

*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************

Reply via email to