Creation d'une image map SVG interactive

Instruction

(Cette section nécessite une traduction)

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

Plan d'implémentation

(Cette section nécessite une traduction)

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

Exemple pratique: Trouvez votre bureau de service local

Nord

Lorem ipsum

Intérieur méridional

Lorem ipsum

Île/côte de Vancouver

Lorem ipsum

Partie continentale/Sud-Ouest

Lorem ipsum