I am working on an interactive SVG map of France, where each region is represented by a group that contains multiple elements. The map needs to be accessible, and I want to ensure I follow best practices for web accessibility.
Here is a simplified version of my SVG:
<svg viewBox="0 0 800 759" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" aria-labelledby="description">
<desc id="description">Carte de France avec ses régions</desc>
<g aria-describedby="tooltip-11">
<a href="/">
<path d="M 437.43 178.76 432.8 186.13 436.69 187.81 436.25 194.54 439.8 195.32 436.54 201.09 437.29 203.08 432.78 207.96 433.95 215.41 431.33 216.85 425.49 217.44 419.32 216.88 414.47 218.03 412.81 222.13 414.44 224.95 412.41 229.38 408.67 233.45 403.34 235.78 399.06 234.83 396.28 236.53 393.12 235.48 386.63 236.22 383.36 235.47 386.73 230.89 381.28 222.38 368.67 221.47 361.25 223.54 356.95 221.57 358.3 217.48 357.8 214.23 354.31 211.14 351.12 210.5 347.98 207.05 347.66 202.08 343.7 199.45 338.51 192.75 337.4 190.05 339.97 186.45 337.34 183 337.9 177.5 335.59 172.52 333.68 171.02 330.97 162.6 338.93 159.77 341.85 156.21 343.1 149.7 344.67 148.08 347.23 152.71 349.75 151.91 354.49 153.49 360.12 152.78 363.77 150.58 365.77 151.98 371.43 152.62 373.18 154.78 376.29 152.17 386.14 157.66 393.03 158.94 399.19 162.24 402.09 159.33 405.26 161.51 414.64 160.25 415.54 158.01 419.17 158.53 421.94 163.41 420.83 165.72 427.95 171.11 429.31 174.29 437.43 178.76 Z"
data-name="Île-de-France"/>
<path d="M 377.02 181.46 371.4 178.51 376.45 174.83 381.46 178.93 377.02 181.46 Z" data-name="Paris" id="75"/>
<path d="M 389.53 191.46 390.63 182.32 389.15 175.77 390.78 171.2 388.72 166.21 390.67 160.68 393.03 158.94 399.19 162.24 414.64 160.25 415.78 157.73 420.64 159.14 420.83 165.72 427.95 171.11 429.31 174.29 437.43 178.76 432.8 186.13 436.69 187.81 436.25 194.54 441.25 197.12 432.78 207.96 433.95 215.41 425.49 217.44 414.47 218.03 414.44 224.95 408.67 233.45 403.34 235.78 399.06 234.83 386.63 236.22 386.73 230.89 380.44 220.87 384.24 215.36 386.47 206.28 385.66 203.27 389.53 191.46 Z" data-name="Seine-et-Marne" id="77"/>
<path d="M 370.2 174.12 367.58 181.37 371.47 184.65 365.83 187.27 360.95 193.97 360.26 201.86 355.9 202.52 355.15 209.73 351.12 210.5 347.98 207.05 347.66 202.08 343.7 199.45 337.4 190.05 339.97 186.45 337.34 183 337.9 177.5 333.68 171.02 330.97 162.6 339.49 160.27 345.4 162.99 350.94 160.57 356.59 164.97 364.25 165.65 370.52 170.85 370.2 174.12 Z" data-name="Yvelines" id="78"/>
<path d="M 371.47 184.65 376.39 186.87 389.53 191.46 385.66 203.27 386.47 206.28 384.24 215.36 380.44 220.87 368.67 221.47 358.76 223.33 358.3 217.48 355.15 209.73 355.9 202.52 360.26 201.86 360.95 193.97 365.83 187.27 371.47 184.65 Z" data-name="Essonne" id="91"/>
<path d="M 374.97 170.81 376.45 174.83 371.4 178.51 377.02 181.46 376.39 186.87 371.47 184.65 367.58 181.37 370.2 174.12 374.97 170.81 Z" data-name="Hauts-de-Seine" id="92"/>
<path d="M 388.72 166.21 390.78 171.2 389.15 175.77 390.63 182.32 386.13 178.33 381.46 178.93 376.45 174.83 374.97 170.81 378.89 169.01 383.64 170.5 388.72 166.21 Z" data-name="Seine-Saint-Denis" id="93"/>
<path d="M 377.02 181.46 381.46 178.93 386.13 178.33 390.63 182.32 389.53 191.46 376.39 186.87 377.02 181.46 Z" data-name="Val-de-Marne" id="94"/>
<path d="M 390.67 160.68 388.72 166.21 383.64 170.5 378.89 169.01 374.97 170.81 370.2 174.12 370.52 170.85 364.25 165.65 356.59 164.97 350.94 160.57 345.4 162.99 339.49 160.27 344.67 148.08 347.23 152.71 354.49 153.49 363.77 150.58 371.43 152.62 376.29 152.17 390.67 160.68 Z" data-name="Val-d'Oise" id="95"/>
</a>
</g>
</svg>
<span id="tooltip-11" role="tooltip" class="tooltip placement">Île-de-France</span>
I am unsure whether I should:
- Wrap the entire
<g>
group in a single<a>
tag. - Wrap each
<path>
element within the<g>
group in a single<a>
tag (that’s what I’ve done in the provided example).
Additionally, I want to ensure that the SVG element has the correct role. Should it be role="img"
or something else, given the interactivity?