CodeForge

Maquetación Web Dinámica / Accesibilidad y rendimiento

Accesibilidad real: teclado, foco, contraste y ARIA

Teoría22 min20 XP

Un sitio accesible es uno que CUALQUIERA puede usar: quien navega solo con teclado, quien no distingue bien los colores, quien usa un lector de pantalla. No es una casilla que se marca al final — es diseño desde el principio, y en gran parte sale GRATIS con el HTML semántico que ya sabes. Esta lección son los cuatro pilares prácticos que llevas años rozando y hoy haces conscientes.

La rampa del edificio

Pilar 1: todo funciona con teclado

Muchos usuarios navegan solo con teclado (Tab para avanzar, Enter/Espacio para activar, Escape para cerrar). La regla de oro: todo lo interactivo debe ser alcanzable y operable sin mouse — y el HTML semántico te lo da gratis.

teclado.html
<!-- ✓ elementos NATIVOS: enfocables y operables por teclado SIN esfuerzo -->
<button>Enviar</button>   <!-- Tab llega, Enter/Espacio activa -->
<a href="/precios">Precios</a>

<!-- ✗ un div con onclick NO es accesible por teclado -->
<div onclick="enviar()">Enviar</div>
<!-- Tab no llega, Enter no hace nada: invisible para el teclado -->

Usar <button> en vez de un <div onclick> te da foco, activación por teclado y anuncio correcto en lectores de pantalla — tres cosas, gratis. Recrear eso en un div exige tabindex, manejadores de teclado y role: mucho trabajo para reinventar lo que el elemento correcto ya hace.

Pilar 2: el foco SIEMPRE visible

El anillo de foco le dice a quien usa teclado "estás aquí". Borrarlo (el tristemente célebre outline: none) deja al usuario perdido. La regla: nunca lo quites sin reemplazarlo, y usa :focus-visible para mostrarlo solo a quien navega por teclado:

foco.css
/* ✗ JAMÁS esto solo: deja al usuario de teclado sin saber dónde está */
button:focus { outline: none; }

/* ✓ un foco claro, solo cuando se navega por teclado */
button:focus-visible { outline: 3px solid #6d28d9; outline-offset: 2px; }

Pruébalo con Tab

Pilar 3: contraste suficiente

El texto debe destacar sobre su fondo. El estándar WCAG AA pide 4.5:1 para texto normal y 3:1 para texto grande (18px+ negrita o 24px+):

contraste.css
/* ✗ gris claro sobre blanco: ~2.3:1, ilegible para muchos */
.mal { color: #b0b0b0; background: #ffffff; }

/* ✓ gris medio sobre blanco: ~4.6:1, pasa AA */
.bien { color: #64748b; background: #ffffff; }

No lo calcules a ojo: DevTools te muestra el ratio al inspeccionar un color (y avisa si falla AA), y hay verificadores como el de WebAIM. Es el mismo criterio que este curso aplica a cada ejemplo (la paleta AA de la guía de estilo).

Pilar 4: ARIA solo cuando el HTML no alcanza

Necesitas un botón que abre un menú. Un compañero propone un div con onclick y role='button'. ¿Cuál es el problema y la mejor solución?

Mini-reto

Audita "El Observador" solo con el teclado: guarda el mouse y navega toda la página con Tab, Enter y Escape. Anota cada punto donde te "pierdes" (sin anillo de foco visible), no puedes llegar (un div clickeable), o quedas atrapado. Cada uno es un fallo de accesibilidad real. Arréglalos usando elementos nativos y :focus-visible. Media hora de navegar sin mouse enseña más que cualquier checklist.

Qué sigue

Probaste con teclado. La próxima prueba es más reveladora aún: cerrar los ojos. La próxima lección te enseña a experimentar tu página con un LECTOR DE PANTALLA —cómo la "escucha" alguien que no la ve— y por qué el orden y la semántica de tu HTML importan más de lo que creías.