W3C home > Mailing lists > Public > w3c-wai-gl@w3.org > October to December 2003

Client-Side maps and object... what is wrong?

From: Roberto Scano - IWA/HWG <rscano@iwa-italy.org>
Date: Sun, 5 Oct 2003 12:21:03 +0200
Message-ID: <00ee01c38b2a$63570340$0400a8c0@iwars>
To: "WCAG List" <w3c-wai-gl@w3.org>

Hi,
working with Image Maps, I've found that this example:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#client-side-redundant-text

   <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
   <MAP name="map1">
     <P>Navigate the site.
     [<A href="guide.html" shape="rect"
        coords="0,0,118,28">Access Guide</A>]
     [<A href="shortcut.html" shape="rect"
        coords="118,0,184,28">Go</A>]
     [<A href="search.html" shape="circle"
        coords="184.200,60">Search</A>]
     [<A href="top10.html" shape="poly"
        coords="276,0,276,28,100,200,50,50,276,0">
          Top Ten</A>]
   </MAP>
   </OBJECT>

The code in the example has the idea that - if the object is not
available, the links are shown in textual mode but if the object is
available the same links let to point to an area of the image inside the
map.

I've test this code with different browsers and these are the results:

* Internet Explorer 6: if there is no valorization of the width and
height attribute, the object is not visible and there is no alternative
visible version

* Mozilla 1.5a: the image map is available but no link are available

* Opera 7.11: like IE 6

With a code modification (changing the "<a href" into "<area ..." and
removing the textual version for the link it works with Mozilla and
Opera.

Searching around the web I've found a lot of code examples that refer to
this use, also inside the WCAG Curriculum.

I've found a working version in there that move the map outside the
object:
http://www.bath.ac.uk/web/accessibility/images.html

<OBJECT DATA="welcome.gif" TYPE="image/gif" USEMAP="#map1">
There are several areas in the library including the <A
HREF="reference.html">Reference</A> section and the <A
HREF="media.html">Audio Visual Lab</A>.
</OBJECT>
<MAP name="map1">
<AREA shape="rect" coords="0,0,30,30" HREF="reference.html"
ALT="Reference">
<AREA shape="rect" coords="34,34,100,100" HREF="media.html" ALT="Audio
Visual Lab">
</MAP>

I've applied it to our code:

   <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
   </OBJECT>
   <MAP name="map1">
     <P>Navigate the site.
     [<A href="guide.html" shape="rect"
        coords="0,0,118,28">Access Guide</A>]
     [<A href="shortcut.html" shape="rect"
        coords="118,0,184,28">Go</A>]
     [<A href="search.html" shape="circle"
        coords="184.200,60">Search</A>]
     [<A href="top10.html" shape="poly"
        coords="276,0,276,28,100,200,50,50,276,0">
          Top Ten</A>]
   </MAP>

And I've found that it works great with Mozilla and Opera but not with
IE.
This solution can also help low-vision people to find the correct
links....
But... how can we do for an optimal use of the "object" inside IE?

The Microsoft people inside the working group can give some help?

Roberto Scano
IWA/HWG EMEA Coordinator
W3C Advisory Commitee Representative for IWA/HWG
International Webmasters Association / HTML Writers Guild
http://www.iwanet.org - http://www.hwg.org
E-Mail: emea@iwanet.org - w3c-rep@iwanet.org
--------------------------------------------------------------------
This email is not an offer to do business, but is only a discussion.
All agreements with IWA must be in writing and acknowledged
by IWA International management.
--------------------------------------------------------------------
Received on Sunday, 5 October 2003 06:24:22 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 7 December 2009 10:47:26 GMT