Accessibilità SVG: Rendere la Grafica Vettoriale Inclusiva

Requisiti WCAG 2.1:
- I contenuti non testuali necessitano di alternative
- Il colore non deve essere l'unico mezzo per trasmettere info
- Contrasto cromatico sufficiente
- Ridimensionabile senza perdite
- Elementi attivabili accessibili da tastiera

<svg aria-hidden="true" focusable="false">
  <!-- grafica decorativa -->
</svg>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Crescita vendite 2025</title>
  <!-- contenuto del grafico -->
</svg>

<svg role="img" aria-labelledby="title desc">
  <title id="title">Organigramma</title>
  <desc id="desc">
    Struttura gerarchica con il CEO in cima,
    tre VP subordinati, ciascuno con team.
  </desc>
  <!-- diagramma complesso -->
</svg>

<!-- Definizione del ruolo -->
role="img"           <!-- immagine statica -->
role="graphics-document"  <!-- interattivo complesso -->

<!-- Etichette -->
aria-label="..."     <!-- descrizione semplice -->
aria-labelledby="..." <!-- riferimento a elemento titolo -->
aria-describedby="..." <!-- descrizione dettagliata -->

<!-- Stati -->
aria-hidden="true"   <!-- nascondere da TA -->
focusable="false"    <!-- impedire il focus -->

<svg role="img" aria-labelledby="icon-title icon-desc">
  <title id="icon-title">Avvertimento</title>
  <desc id="icon-desc">
    Triangolo giallo con punto esclamativo che indica cautela
  </desc>
  <path d="..."/>
</svg>

<svg>
  <a href="/section-1" tabindex="0">
    <rect x="0" y="0" width="100" height="50"/>
    <text>Sezione 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 === ' ') {
    // Attivare l'elemento
  }
});

Requisiti minimi:
Testo: 4.5:1 (normale), 3:1 (grande)
Grafiche: 3:1 rispetto allo sfondo
Componenti UI: 3:1

<!-- Male: Solo colore -->
<circle fill="red"/>  <!-- Errore -->
<circle fill="green"/>  <!-- Successo -->

<!-- Bene: Pattern + Colore -->
<circle fill="red">
  <title>Errore</title>
</circle>
<use href="#checkmark" fill="green">
  <title>Successo</title>
</use>

<button aria-label="Chiudi finestra di dialogo">
  <svg aria-hidden="true" focusable="false">
    <path d="..."/>
  </svg>
</button>

<button>
  <svg aria-hidden="true"><!-- icona --></svg>
  Salva documento
</button>

<svg role="img" aria-label="Notifica: 3 messaggi non letti">
  <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">
  Metti in pausa l'animazione
</button>

<svg class="animated-svg">
  <!-- contenuto animato -->
</svg>

<a href="/">
  <svg role="img" aria-label="Nome azienda - Home">
    <title>Logo aziendale</title>
    <!-- percorsi del logo -->
  </svg>
</a>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Vendite mensili 2025</title>
  <desc>Grafico a barre con vendite in crescita
        da €10K a gennaio a €45K a dicembre</desc>

  <!-- Fornire tabella alternativa -->
</svg>
<table class="sr-only">
  <!-- tabella dati accessibile -->
</table>

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