Image Map with various shapes for hotspots

Overview

Image map using the shape attribute with values rect, circle and poly

Implementation

Standard use of map and area elements along with the shape attribute

Example

Please select a shape:

Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star. Red box. Green circle. Blue triangle. Yellow star.

Focus Order Testing

OS Browser Engine Results
Windows 7 IE 11 Trident Visual focus indication stays on map when you tab through the area elements
Windows 7 FireFox 56 Gecko Focus order is logical and there is visual focus indication
Windows 7 Chrome 63 Blink Focus order is logical but there is no visual focus indication
iOS 11.2 Safari Mobile Webkit with VoiceOver It is possible to swipe to the map element but not the area elements. But you can touch the "hotspots" to interact with them.