Create an interactive SVG image map

Instruction

1. Create a SVG
2. Implement SVG and apply the CSS class like the working example bellow
3. Ensure the anchor <a> in the SVG wrap all elements (polygon, path, text) that related to it
4. For accessibility: Apply an aria-label and role="img" on a div that wrap the SVG image. This to comply with SC 1.1.1
6. For accessibility: Provide an alternate version which consist into a list of links
7. For accessibility: Consider and review the SC 1.4.11 Non-Text Contrast pass

Implementation plan

1. Test this component with live content
2. Engage with DTO (By end of october 2022), and discuss about guidance on this component/design pattern. Like when to use it? If it match our visual web presence?
3. Make any adjustment, based on DTO (TBS) discussion or/and by implementation experience
4. Produce a ACR (Accessibility Conformance Report)
5. Move this contribution into GCWeb as a provisional feature

Working Example - Find your service location in your region

North

Lorem ipsum

Southern Interior

Lorem ipsum

Vancouver Island and Coast

Lorem ipsum

Mainland / Southern

Lorem ipsum