Re-using a map for multiple images
The only way to re-use a map and maintain a logical focus order is to duplicate it.
Implementation
- The
<map>element is duplicated with differentids - The
<map>element as a direct sibling to the image. - Redundant text links are provided below each image for iOS/Safari/VoiceOver
- Davy Jones: Chairman
- Carole Brewster: Company Secretary
- Harry H Brown: Marketing Director
- Paula Holbein: Sales Director
- Hugh Howard: Finance Director
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Focus Order Testing
| OS | Browser | Engine | Results |
|---|---|---|---|
| Windows 7 | IE 11 | Trident | Focus order is logical |
| Windows 7 | FireFox 56 | Gecko | Focus order is logical |
| Windows 7 | Chrome 63 | Blink | Focus order is logical |
| iOS 11.2 | Safari | Mobile Webkit with VoiceOver | Individual interactive areas cannot be swiped to but do respond to touch. The redudant links below each image can be swiped to and activated. |