Accessibilité SVG : Rendre les Graphiques Vectoriels Inclusifs

Exigences WCAG 2.1 :
- Le contenu non textuel nécessite des alternatives
- La couleur ne doit pas être le seul moyen de transmettre l'info
- Contraste de couleur suffisant
- Redimensionnable sans perte
- Les éléments focalisables accessibles au clavier

<svg aria-hidden="true" focusable="false">
  <!-- graphique décoratif -->
</svg>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Croissance des ventes 2025</title>
  <!-- contenu du graphique -->
</svg>

<svg role="img" aria-labelledby="title desc">
  <title id="title">Organigramme</title>
  <desc id="desc">
    Structure hiérarchique montrant le PDG en haut,
    avec trois VP en dessous, chacun avec des équipes.
  </desc>
  <!-- diagramme complexe -->
</svg>

<!-- Définition du rôle -->
role="img"           <!-- image statique -->
role="graphics-document"  <!-- interactif complexe -->

<!-- Labels -->
aria-label="..."     <!-- description simple -->
aria-labelledby="..." <!-- référence à un élément titre -->
aria-describedby="..." <!-- description détaillée -->

<!-- États -->
aria-hidden="true"   <!-- masquer des TA -->
focusable="false"    <!-- empêcher le focus -->

<svg role="img" aria-labelledby="icon-title icon-desc">
  <title id="icon-title">Avertissement</title>
  <desc id="icon-desc">
    Triangle jaune avec point d'exclamation indiquant la prudence
  </desc>
  <path d="..."/>
</svg>

<svg>
  <a href="/section-1" tabindex="0">
    <rect x="0" y="0" width="100" height="50"/>
    <text>Section 1</text>
  </a>
</svg>

svg a:focus,
svg [tabindex]:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

svgElement.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    // Activer l'élément
  }
});

Exigences minimales :
Texte : 4.5:1 (normal), 3:1 (grand)
Graphiques : 3:1 par rapport au fond
Composants UI : 3:1

<!-- Mauvais : Couleur seule -->
<circle fill="red"/>  <!-- Erreur -->
<circle fill="green"/>  <!-- Succès -->

<!-- Bon : Motif + Couleur -->
<circle fill="red">
  <title>Erreur</title>
</circle>
<use href="#checkmark" fill="green">
  <title>Succès</title>
</use>

<button aria-label="Fermer la boîte de dialogue">
  <svg aria-hidden="true" focusable="false">
    <path d="..."/>
  </svg>
</button>

<button>
  <svg aria-hidden="true"><!-- icône --></svg>
  Enregistrer le document
</button>

<svg role="img" aria-label="Notification : 3 messages non lus">
  <circle cx="12" cy="12" r="10" fill="#ff0000"/>
  <text x="12" y="16" text-anchor="middle">3</text>
</svg>

@media (prefers-reduced-motion: reduce) {
  svg * {
    animation: none !important;
    transition: none !important;
  }
}

<button id="toggle-animation">
  Mettre en pause l'animation
</button>

<svg class="animated-svg">
  <!-- contenu animé -->
</svg>

<a href="/">
  <svg role="img" aria-label="Nom de l'entreprise - Accueil">
    <title>Logo de l'entreprise</title>
    <!-- chemins du logo -->
  </svg>
</a>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Ventes mensuelles 2025</title>
  <desc>Graphique en barres montrant les ventes passant
        de 10K€ en janvier à 45K€ en décembre</desc>

  <!-- Fournir un tableau alternatif -->
</svg>
<table class="sr-only">
  <!-- tableau de données accessible -->
</table>

<svg class="icon" aria-hidden="true" focusable="false">
  <use href="#icon-search"/>
</svg>
<span class="icon-label">Rechercher</span>