Accesibilidad Web (A11Y / WCAG)

La accesibilidad web (A11Y) garantiza que TODAS las personas puedan usar tu sitio, incluyendo usuarios con discapacidades visuales, motoras o cognitivas. Las pautas WCAG (Web Content Accessibility Guidelines) definen 4 principios: Perceptible (el contenido se puede ver/oir), Operable (se puede navegar con teclado), Comprensible (el texto y la navegación son claros) y Robusto (funciona en tecnologías asistivas).

Los atributos ARIA (Accessible Rich Internet Applications) dan información extra a los lectores de pantalla. aria-label describe un elemento sin texto visible, aria-hidden="true" oculta elementos decorativos, role indica la función (role="navigation", role="alert"), aria-live="polite" anuncia cambios dinámicos. Importante: el HTML semántico correcto (<nav>, <main>, <button>) ya tiene roles ARIA implícitos — usa ARIA solo cuando el HTML no basta.

<!-- 1. HTML SEMÁNTICO = accesibilidad gratis -->
<header>
  <nav aria-label="Navegación principal">
    <a href="/">Inicio</a>
    <a href="/cursos">Cursos</a>
  </nav>
</header>
<main>
  <h1>Aprende a Programar</h1>
  <section aria-labelledby="cursos-titulo">
    <h2 id="cursos-titulo">Cursos Populares</h2>
  </section>
</main>

<!-- 2. IMÁGENES accesibles -->
<img src="grafico.png" alt="Gráfico de barras mostrando 80% de avance">
<img src="decoracion.svg" alt="" aria-hidden="true"> <!-- decorativa -->

<!-- 3. FORMULARIOS accesibles -->
<label for="email">Correo electrónico</label>
<input id="email" type="email" aria-required="true"
       aria-describedby="email-ayuda">
<span id="email-ayuda">Usaremos tu correo para enviarte el certificado</span>

<!-- 4. BOTONES con texto para lectores de pantalla -->
<button aria-label="Cerrar modal">
  <svg><!-- icono X --></svg>
</button>

/* CONTRASTE — mínimo 4.5:1 para texto normal, 3:1 para grande */
.texto-accesible {
  color: #f5f5f5;          /* texto claro */
  background: #0A0F1E;     /* fondo oscuro */
  /* Ratio: 15.6:1 ✅ — supera el mínimo con creces */
}

/* FOCUS VISIBLE — NUNCA quites el outline sin reemplazarlo */
:focus-visible {
  outline: 3px solid #00E5A0;
  outline-offset: 2px;
}

/* NO hagas esto: a:focus { outline: none; } ❌ */

/* TAMAÑO de click mínimo 44x44px */
.boton {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px;
}

/* SKIP LINK — saltar al contenido */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 100;
}
.skip-link:focus {
  top: 0; /* aparece solo con Tab */
}

/* MODO OSCURO respetando preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (prefers-color-scheme: dark) {
  :root { --bg: #0A0F1E; --text: #f5f5f5; }
}