Pruebas con teclado y lector de pantalla, paso a paso
Pruebas con teclado y lector de pantalla
Pruebas con teclado y lector de pantalla, paso a paso | We.Inc
Una prueba manual paso a paso para cualquier sitio: comprobaciones con teclado, comandos de NVDA y VoiceOver, un enlace para saltar al contenido, CSS :focus-visible y una lista de verificación marcable.
Para probar un sitio con el teclado, aparta el ratón y usa Tab, Shift+Tab, Enter, Space y las flechas para llegar a todo y manejarlo, comprobando que haya un anillo de foco visible y un orden lógico. Después activa un lector de pantalla, NVDA en Windows o VoiceOver en Mac, y comprueba que los encabezados, enlaces, botones y campos de formulario se anuncian con claridad.
Criterios de WCAG 2.2 que cubren estas pruebas
Criterio
Nivel
Qué compruebas
2.1.1 Teclado
Todo funciona sin ratón
2.1.2 Sin trampas de teclado
El foco siempre puede volver a salir
2.4.1 Evitar bloques
Una forma de saltar la navegación repetida
2.4.3 Orden del foco
El orden de tabulación sigue el sentido de la página
2.4.7 Foco visible
AA
Siempre puedes ver dónde está el foco
2.4.11 Foco no oculto (mínimo)
AA
Las barras fijas no tapan el elemento enfocado
4.1.2 Nombre, función, valor
Los controles anuncian qué son y su estado
Los verificadores automáticos detectan textos alternativos ausentes y bajo contraste, pero no pueden saber si un menú se abre con Enter o si un usuario de lector de pantalla entiende un formulario. Esta página recorre la revisión manual en orden, con una zona de práctica que muestra exactamente qué elemento tiene el foco y una lista de verificación que guarda tu avance.
Abre en otra pestaña la página que quieres probar. Mantén esta lista a su lado.
Haz primero los pasos de teclado y marca cada elemento. El contador de progreso se actualiza sobre la marcha.
Usa la zona de práctica de aquí para ensayar: recórrela con Tab y el rastreador de foco nombra el elemento que tiene el foco.
Después inicia un lector de pantalla con los comandos de las tablas y repite el recorrido escuchando.
Copia el código del enlace para saltar y del estilo de foco para corregir los fallos más habituales.
Prueba los recorridos clave, no todas las páginas: el menú, una búsqueda, el formulario principal, el pago o la reserva y cualquier diálogo.
Amplía el navegador al 200 por ciento mientras tabulas. Los anillos de foco y los encabezados fijos suelen chocar a tamaños mayores.
Si quitas el contorno por defecto, sustitúyelo en la misma regla. Nunca dejes outline: none solo.
Usa elementos button y a reales. Un div clicable lo salta Tab y se anuncia como texto plano.
Escucha un formulario completo con el lector de pantalla antes de cambiar nada. Las etiquetas que faltan se notan de oído.
Preguntas frecuentes
¿Con qué lector de pantalla debo probar?
Usa lo que usan tus visitantes siempre que puedas. NVDA es gratuito para Windows, de NV Access, y VoiceOver viene integrado en todos los Mac y iPhone. Si la mayor parte de tu tráfico llega desde teléfonos, añade una pasada con VoiceOver en iPhone o TalkBack en Android.
¿Cómo inicio y detengo NVDA y VoiceOver?
Una vez instalado, NVDA se inicia con Control+Alt+N, e Insert+Q lo cierra. En un Mac, Command+F5 activa y desactiva VoiceOver. Pulsar Control solo hace callar a NVDA a mitad de frase.
¿Qué es un enlace para saltar al contenido?
Es el primer enlace de la página, normalmente oculto hasta que recibe el foco, que lleva directamente al contenido principal. Así los usuarios de teclado evitan tabular por toda la navegación en cada página. WCAG lo recoge como una técnica suficiente para 2.4.1 Evitar bloques, junto con los landmarks y los encabezados.
¿Debo usar :focus o :focus-visible?
:focus-visible deja que el navegador decida cuándo es útil un anillo de foco, de modo que los usuarios de teclado lo ven mientras que los clics de ratón en botones normalmente no lo dibujan. Según MDN, tiene amplio soporte desde marzo de 2022. Da estilo a :focus-visible y mantén un anillo visible en cada elemento interactivo.
¿Qué es una trampa de teclado?
Un punto en el que el foco entra y no puede salir con el teclado, como un reproductor incrustado o un diálogo personalizado que se traga el Tab. Los diálogos modales deben mantener el foco dentro mientras están abiertos, pero Escape o un botón de cierre siempre deben permitir al visitante salir.
Modo exploración frente a modo foco
Los lectores de pantalla leen las páginas web en un búfer virtual donde las letras sueltas sirven para saltar: H para el siguiente encabezado, K para el siguiente enlace en NVDA. Cuando llegas a un campo de texto, el lector cambia a modo foco para que las letras escriban. NVDA+Space alterna entre los dos a mano.
Por eso un widget personalizado que solo responde a las flechas puede parecer roto. En modo exploración, el lector puede consumir esas teclas antes de que tu script las reciba, así que usa elementos nativos o sigue los patrones de ARIA Authoring Practices.
Cómo suena algo bien hecho
Cada control debe anunciarse con un nombre, una función y, cuando corresponda, un estado: Buscar, editar texto; Menú, botón, contraído; Suscribirse, casilla, no marcada. Si falta alguno de los tres, corrige el marcado antes de añadir ARIA.
Los encabezados deben formar un esquema que podrías leer como un índice. Abre la lista de encabezados en la lista de elementos de NVDA o en el rotor de VoiceOver y comprueba si tiene sentido por sí sola.
Cómo registrar lo que encuentras
Anota cada problema con la página, los pasos, lo que esperabas y lo que ocurrió, además del criterio que incumple. Ese formato permite que un desarrollador lo reproduzca sin adivinar.
Vuelve a probar tras las correcciones con los mismos pasos. Los problemas de foco, en particular, tienden a reaparecer cuando se rediseña un encabezado o un modal.
Teclas para probar solo con teclado
Comportamiento estándar del teclado en el navegador
Tecla
Qué debe hacer
Tab / Shift+Tab
Ir al siguiente o al anterior elemento enfocable
Enter
Seguir un enlace o pulsar un botón
Space
Pulsar un botón, marcar una casilla, desplazar la página cuando nada tiene el foco
Flechas
Moverse dentro de grupos de opciones, desplegables, menús y listas de pestañas
Escape
Cerrar un diálogo, menú o ventana emergente
Comandos de NVDA (Windows, distribución de escritorio)
La tecla NVDA es Insert por defecto; la guía de usuario también permite Caps Lock. Las teclas de una sola letra funcionan en modo exploración.
De la guía de usuario de NVDA
Acción
Teclas
Iniciar NVDA
Control+Alt+N
Detener la voz
Control
Leer desde aquí (verbalizar todo)
NVDA+Flecha abajo
Alternar modo exploración y modo foco
NVDA+Space
Lista de elementos (enlaces, encabezados, landmarks)
NVDA+F7
Siguiente encabezado / landmark / enlace
Siguiente campo de formulario / botón
Siguiente tabla / lista
Salir de NVDA
NVDA+Q
Comandos de VoiceOver (Mac)
VO es el modificador de VoiceOver: Control y Option pulsadas a la vez, o Caps Lock sola.
De la guía de usuario de VoiceOver de Apple
Acción
Teclas
Activar o desactivar VoiceOver
Command+F5
Abrir el rotor
VO+U
Cambiar de lista del rotor (encabezados, enlaces y más)
Flecha izquierda o derecha dentro del rotor
Recorrer la lista elegida
Flecha arriba o abajo dentro del rotor
Soluciones para los fallos más habituales
Enlace para saltar al contenido
Haz clic dentro del resultado y pulsa Tab. El enlace aparece solo cuando recibe el foco, y su destino es el elemento main.
Un anillo de foco que solo ven los usuarios de teclado
Tabula hasta los botones del resultado. El anillo desplazado queda separado del borde del botón, y los clics de ratón normalmente lo dejan oculto.
Evita que los elementos enfocados queden bajo un encabezado fijo
scroll-padding-top reserva espacio arriba cuando el navegador desplaza a la vista un elemento enfocado o un ancla.
Solo teclado
Pulsa Tab una vez tras cargar la página
Aparece un enlace para saltar al contenido y funciona con Enter
Recorre toda la página con Tab
Se llega a cada enlace, botón y campo, en orden de lectura
Observa el anillo de foco en cada parada
Siempre es visible y nunca queda oculto tras un encabezado fijo
Abre el menú y cualquier desplegable
Enter o Space los abren; Escape los cierra y devuelve el foco
Maneja los widgets personalizados
Pestañas, controles deslizantes y carruseles responden a las teclas esperadas
Abre y cierra un diálogo
El foco entra en él, se queda dentro y vuelve al disparador al cerrar
Rellena y envía el formulario principal
Los errores son accesibles y el foco cae en un lugar útil
Intenta quedarte atascado
Ningún contenido incrustado ni widget atrapa el foco
Lector de pantalla
Escucha el título de la página y el primer encabezado
Indican en qué página estás
Abre la lista de encabezados
Los encabezados forman un esquema lógico con un solo h1
Abre la lista de landmarks
Están presentes las regiones de banner, navegación, principal y pie
Recorre los enlaces
El texto de cada enlace tiene sentido fuera de contexto
Visita cada campo del formulario
Cada campo anuncia una etiqueta, su tipo y si es obligatorio
Provoca un mensaje de error y uno de éxito
Ambos se anuncian sin mover el ratón
Revisa las imágenes
Las imágenes informativas tienen texto alternativo; las decorativas no dicen nada
Activa un botón o una casilla
Se anuncia el nuevo estado, como expandido o marcado
Lista de verificación de pruebas
Restablecer
Marca cada paso mientras pruebas. Tus marcas se guardan solo en esta página.
{n} de {total} pasos hechos
Nada dentro de la página tiene el foco
campo {t}
sin nombre accesible
Entra en la zona con Tab para empezar
Zona de práctica de foco
Recorre estos controles con Tab. El rastreador nombra el elemento que tiene el foco ahora mismo.