Accesibilidad

1.Qué es la accesibilidad y por qué importa

Una página es accesible cuando puede usarla cualquier persona, sin importar cómo vea, oiga, se mueva o piense. No es un lujo para «unos pocos»: casi todos necesitamos accesibilidad en algún momento.

Además, una página accesible suele ser mejor para todos: más clara, más rápida, más fácil de usar con teclado y mejor posicionada en buscadores. En muchos países también es una obligación legal para sitios públicos y comerciales.

Los cuatro principios (POUR)

2.HTML correcto: el 80% del trabajo

Lo más importante ya lo aprendiste. Una página con HTML semántico es accesible casi sin esfuerzo extra:

Haz clic dentro del resultado y pulsa Tab: el foco llega al botón real, pero ignora al <div>. Eso es lo que vive una persona que no usa ratón.

3.Color y contraste

El texto debe distinguirse del fondo. El contraste se mide con una proporción (de 1:1, sin contraste, a 21:1, negro sobre blanco). Las pautas WCAG piden:

Prueba tú mismo: el valor inicial es un gris claro sobre blanco, muy común… y que no pasa. Mueve los colores y mira cuándo se cumple cada nivel.

▶ Ver animación

• No dependas solo del color. Un campo con error no debe distinguirse únicamente por tener borde rojo: añade un texto o un ícono. Un 8% de los hombres tiene alguna forma de daltonismo.
• Subraya los enlaces dentro de párrafos, o dales otra señal además del color.
• Los textos sobre imágenes necesitan un fondo o sombra que garantice el contraste.
• Respeta el zoom. Usa rem o %, no px, para tamaños de texto, y no bloquees el zoom en el <meta viewport>.

4.Teclado y foco

Mucha gente no usa ratón: personas con discapacidad motriz, quienes usan lectores de pantalla y quienes prefieren la velocidad del teclado. Todo lo que se hace con clic debe poder hacerse con teclado.

1. El foco siempre debe verse

:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Nunca escribas outline: none sin dar una alternativa: sería como esconder el cursor del ratón.

2. Enlace para saltar al contenido

Quien navega con teclado tendría que pulsar Tab sobre todo el menú en cada página. Un «enlace para saltar» al inicio lo evita:

<body>
  <a class="saltar" href="#contenido">Saltar al contenido</a>
  <header>…menú largo…</header>
  <main id="contenido">…</main>
</body>

<style>
  .saltar { position: absolute; left: -999px; }
  .saltar:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 10; }
</style>

El enlace está fuera de la pantalla hasta que recibe el foco con Tab; entonces aparece y, al pulsarlo, salta directo al <main>. Este curso lo usa: pulsa Tab al abrir cualquier lección.

3. El orden y tabindex

• El orden de Tab sigue el orden del HTML: escribe el código en el orden en que se debe leer.
• tabindex="0" hace que un elemento no interactivo reciba foco (rara vez lo necesitarás).
• tabindex="-1" permite enfocarlo con programación pero no con Tab.
• No uses valores positivos (tabindex="3"): desordenan la navegación.

5.Formularios accesibles

Ya viste en la lección 5 que cada campo necesita su <label>. Falta lo que ocurre cuando hay errores:

<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo"
       required aria-invalid="true" aria-describedby="error-correo">
<p id="error-correo" role="alert">Escribe un correo válido, por ejemplo ana@ejemplo.com.</p>

• aria-describedby conecta el campo con el texto que lo explica; el lector lo lee después de la etiqueta.
• aria-invalid="true" avisa que el valor actual no es válido.
• role="alert" hace que el lector anuncie el mensaje en cuanto aparece.
• El error debe explicar qué pasó y cómo corregirlo, no solo «campo inválido».
• Usa autocomplete (por ejemplo autocomplete="email") para que el navegador rellene los datos.

6.ARIA: cuándo y cómo

ARIA es un conjunto de atributos que añaden información a las tecnologías de apoyo. Tiene una regla de oro:

<button type="button" aria-label="Abrir menú">
  <span aria-hidden="true">☰</span>
</button>

El botón solo muestra un símbolo, pero el lector de pantalla anuncia «Abrir menú, botón». El símbolo se oculta porque «tres rayas» no aporta nada.

7.Movimiento y tiempo

• Respeta prefers-reduced-motion: quien lo activa en su sistema pide menos animación.
• Nada de parpadeos rápidos (más de 3 por segundo): pueden desencadenar convulsiones.
• Permite pausar carruseles, videos de fondo y animaciones largas.
• No limites el tiempo de lectura o de llenado sin avisar y sin permitir ampliarlo.

.tarjeta { transition: transform .3s; }

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

Las animaciones de este curso incluyen este bloque: si tu sistema pide reducir movimiento, desaparecen.

8.Cómo probar tu página

No necesitas ser experto: con estas pruebas de cinco minutos detectas la mayoría de los problemas.

1. Teclado: Deja el ratón. Recorre la página con Tab. ¿Ves siempre dónde estás? ¿Puedes llegar a todo y activarlo?
2. Zoom: Amplía al 200% (Ctrl + +). ¿Se sigue leyendo sin desplazarte de lado?
3. Contraste: Revisa colores con un comprobador como el de esta lección.
4. Lector de pantalla: Prueba 5 minutos con NVDA (Windows, gratis), VoiceOver (Mac/iPhone) o TalkBack (Android).
5. Herramientas: Ejecuta Lighthouse (pestaña en F12 de Chrome), WAVE o axe DevTools. Detectan errores automáticos, pero solo una parte: la prueba humana sigue siendo necesaria.

9.Errores frecuentes

• Quitar el contorno de foco con outline: none.
• Usar <div> o <span> como botones o enlaces.
• Enlaces como «haz clic aquí» o «leer más» sin contexto.
• Imágenes sin alt, o con alt como «imagen1».
• Campos solo con placeholder, sin <label>.
• Texto gris claro sobre fondo blanco.
• Mensajes de error solo en rojo, sin texto que los explique.
• Abusar de ARIA o usarlo para tapar un HTML mal escrito.
• Saltar niveles de títulos para lograr un tamaño de letra.

10.Glosario