Accesibilidad SVG: Cómo Hacer Gráficos Vectoriales Inclusivos

Requisitos WCAG 2.1:
- El contenido no textual necesita alternativas
- El color no debe ser el único transmisor de información
- Contraste de color suficiente
- Redimensionable sin pérdida
- Elementos enfocables accesibles por teclado

<svg aria-hidden="true" focusable="false">
  <!-- gráfico decorativo -->
</svg>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Crecimiento de ventas 2025</title>
  <!-- contenido del gráfico -->
</svg>

<svg role="img" aria-labelledby="title desc">
  <title id="title">Organigrama</title>
  <desc id="desc">
    Estructura jerárquica mostrando al CEO arriba,
    con tres VP subordinados, cada uno con equipos.
  </desc>
  <!-- diagrama complejo -->
</svg>

<!-- Definición de rol -->
role="img"           <!-- imagen estática -->
role="graphics-document"  <!-- interactivo complejo -->

<!-- Etiquetas -->
aria-label="..."     <!-- descripción simple -->
aria-labelledby="..." <!-- referencia a elemento título -->
aria-describedby="..." <!-- descripción detallada -->

<!-- Estados -->
aria-hidden="true"   <!-- ocultar de TA -->
focusable="false"    <!-- prevenir foco -->

<svg role="img" aria-labelledby="icon-title icon-desc">
  <title id="icon-title">Advertencia</title>
  <desc id="icon-desc">
    Triángulo amarillo con signo de exclamación indicando precaución
  </desc>
  <path d="..."/>
</svg>

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

Requisitos mínimos:
Texto: 4.5:1 (normal), 3:1 (grande)
Gráficos: 3:1 contra el fondo
Componentes UI: 3:1

<!-- Mal: Solo color -->
<circle fill="red"/>  <!-- Error -->
<circle fill="green"/>  <!-- Éxito -->

<!-- Bien: Patrón + Color -->
<circle fill="red">
  <title>Error</title>
</circle>
<use href="#checkmark" fill="green">
  <title>Éxito</title>
</use>

<button aria-label="Cerrar diálogo">
  <svg aria-hidden="true" focusable="false">
    <path d="..."/>
  </svg>
</button>

<button>
  <svg aria-hidden="true"><!-- icono --></svg>
  Guardar documento
</button>

<svg role="img" aria-label="Notificación: 3 mensajes sin leer">
  <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">
  Pausar animación
</button>

<svg class="animated-svg">
  <!-- contenido animado -->
</svg>

<a href="/">
  <svg role="img" aria-label="Nombre de la empresa - Inicio">
    <title>Logo de la empresa</title>
    <!-- rutas del logo -->
  </svg>
</a>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Ventas mensuales 2025</title>
  <desc>Gráfico de barras mostrando ventas creciendo
        de 10K€ en enero a 45K€ en diciembre</desc>

  <!-- Proporcionar tabla alternativa -->
</svg>
<table class="sr-only">
  <!-- tabla de datos accesible -->
</table>

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