Scenario 1: area elements of image maps have alternate text using alt |
|
<![CDATA[<img src="../../../Resources/Images/Deque_Products.png" alt="Deque Products list" usemap="#Map1">
<map name="Map" id="Map1" class="wcag-pass">
<area shape="rect" coords="176,14,323,58" href="http://www.deque.com/products/" alt="Deque Products" >
<area shape="rect" coords="6,138,155,182" href="http://www.deque.com/products/axe/" alt="aXe Product" >
<area shape="rect" coords="175,138,323,182" href="http://www.deque.com/products/worldspace-comply/" alt="Worldspace Comply Product" >
<area shape="rect" coords="345,136,496,186" href="http://www.deque.com/products/amaze/" alt="Amaze Product" >
</map>]]> |
Scenario 2: area elements of image maps have alternate text using title |
|
|
<![CDATA[<img src="../../../Resources/Images/Deque_Products.png" alt="Deque Products list" usemap="#Map2">
<map name="Map" id="Map2" class="wcag-pass">
<area shape="rect" coords="176,14,323,58" href="http://www.deque.com/products/" title="Deque Products" >
<area shape="rect" coords="6,138,155,182" href="http://www.deque.com/products/axe/" title="aXe Product" >
<area shape="rect" coords="175,138,323,182" href="http://www.deque.com/products/worldspace-comply/" title="Worldspace Comply Product" >
<area shape="rect" coords="345,136,496,186" href="http://www.deque.com/products/amaze/" title="Amaze Product" >
</map>]]> |
Scenario 3: area elements of image maps have alternate text using aria-label |
|
|
<![CDATA[<img src="../../../Resources/Images/Deque_Products.png" alt="Deque Products list" usemap="#Map3">
<map name="Map" id="Map3" class="wcag-pass">
<area shape="rect" coords="176,14,323,58" href="http://www.deque.com/products/" aria-label="Deque Products" >
<area shape="rect" coords="6,138,155,182" href="http://www.deque.com/products/axe/" aria-label="aXe Product" >
<area shape="rect" coords="175,138,323,182" href="http://www.deque.com/products/worldspace-comply/" aria-label="Worldspace Comply Product" >
<area shape="rect" coords="345,136,496,186" href="http://www.deque.com/products/amaze/" aria-label="Amaze Product" >
</map>]]> |
Scenario 4: area elements of image maps have alternate text using aria-labelledby |
|
deque products
aXe
worldspace comply
amaze
|
<![CDATA[<img src="../../../Resources/Images/Deque_Products.png" alt="Deque Products list" usemap="#Map4">
<map name="Map" id="Map4" class="wcag-pass">
<area shape="rect" coords="176,14,323,58" href="http://www.deque.com/products/" aria-labelledby="p1_4" >
<area shape="rect" coords="6,138,155,182" href="http://www.deque.com/products/axe/" aria-labelledby="p2_4" >
<area shape="rect" coords="175,138,323,182" href="http://www.deque.com/products/worldspace-comply/" aria-labelledby="p3_4" >
<area shape="rect" coords="345,136,496,186" href="http://www.deque.com/products/amaze/" aria-labelledby="p4_4" >
</map>
<div style="visibility:hidden">
<span id="p1_4">deque products</span>
<span id="p2_4">aXe</span>
<span id="p3_4">worldspace comply</span>
<span id="p4_4">amaze</span>
</div>]]> |