Image Maps with logical focus order 1/18/18

Implementation guidance from w3.org

The following article provides a great description of how to implement accessible image maps, including guidance on how to work around [Bug 27787]:

https://www.w3.org/WAI/tutorials/images/imagemap/#an-organizational-chart-with-links-to-individual-pages

The best approach is to follow these key points from the article.

• Use every image map only once. That means if multiple images with the same map are to be used, the map should be duplicated and have a different ids;
• Place the <map> element as a direct sibling to the image.
• Provide redundant text links on the same page

Image map with redundant text links

Focus Order Testing

OS	Browser	Engine	Results
Windows 7	IE 11	Trident	Focus order is logical from right to left
Windows 7	FireFox 56	Gecko	Focus order is logical from right to left
Windows 7	Chrome 63	Blink	Focus order is logical from right to left
iOS 11.2	Safari	Mobile Webkit with VoiceOver	The user is unable to swipe to the individual interactive areas of the image, but they can be activated by touch. The user can swipe to and activate the redundant links below the image map.