Educational Technology Center (ETC)
IT Systems & Networking (ITSN)
Question about ITS? Ask Ellsworth!
Image maps are large images in which specific regions are linked to different locations. The image itself is allowed only one ALT attribute, yet there can be any number of links.
This does not mean that Image Maps should not be used. it is appropriate to use the LONGDESC attribute to link to another page with the text equivalent of the Image Map.
The simplest solution towards making an accessible Image Map is to use a client-side Image Map. This is accomplished by adding the USEMAP attribute to an IMG tag whose value is the name/id (browser dependent, but modern design favors id over name, so it is acceptible -- and preferable -- to include both) of a MAP tag.
<img src="orgChart.jpg" alt="ITS Organizational Chart" longdesc="chart.html" usemap="#orgMap" />
<map id="orgMap" name="orgMap">
....
</map>
Inside the MAP tag are AREA tags which define what portions of the Image Map is a link to a certain location. Like the IMG tag, the AREA tag faces the same accessiblity issues and thus will require the ALT attribute to be accessible (and valid HTML). Some example AREA tag are as follows:
<area shape="rect" coords="44,775,223,823" href="chart.html#smyers" alt="Sheila Myers" />
<area shape="rect" coords="43,666,222,715" href="chart.html#gcond" alt="George Cond III - Sr. Computer Operator" />
<area shape="rect" coords="43,720,222,769" href="chart.html#lketchum" alt="Linda Ketchum - Computer Operator" />
Putting the two examples together, a valid image map would be:
<img src="orgChart.jpg" alt="ITS oOrganizational Chart" longdesc="chart.html" usemap="#orgMap" />
<map id="orgMap" name="orgMap">
<area shape="rect" coords="44,775,223,823" href="chart.html#smyers" alt="Sheila Myers" />
<area shape="rect" coords="43,666,222,715" href="chart.html#gcond" alt="George Cond III - Sr. Computer Operator" />
<area shape="rect" coords="43,720,222,769" href="chart.html#lketchum" alt="Linda Ketchum - Computer Operator" />
</map>
The ITS Organizational Chart is an example of an Image Map in action.
Emma Lazarus Exhibit on Display at Brockport's Drake Memorial Library
Death Penalty Discussion Takes Various Forms on Brockport Campus
Rev. James Netters delivers powerful address at Martin Luther King, Jr., Memorial Lecture
Prison Drama to Help Engage Brockport Campus in Discussion of Death Penalty
Red Cross Blood Drive
10 am - 4 pm
CSA Newlyweds
9 pm - 11 pm
CSA Success VS Sell-Out
9 pm - 11 pm
Thursdays In The Cafe
7 pm - 8:30 pm
CSA Speed Dating
9 pm - 11 pm
