Vista previa de lector de pantalla
Para un lector de pantalla, una página es una sola frase muy larga. Escribe una dirección para obtener esa frase como transcripción, reprodúcela con una voz de tu dispositivo y mira qué elementos se anuncian sin nombre.
De dos dimensiones a una
Con los ojos ves una página de golpe: el logo arriba a la izquierda, el menú a lo ancho, el artículo en el centro, la barra lateral a la derecha. La voz no puede hacer “de golpe”. Un lector de pantalla como NVDA, JAWS, VoiceOver o TalkBack recorre el HTML en el orden del código fuente y dice un elemento cada vez, con el rol del elemento antes de su texto: “heading level 2, Pricing”, “link, Contact us”, “edit, Email, required”.
Nadie aguanta todo eso de principio a fin. Los usuarios con experiencia navegan por tipo. Una tecla salta al siguiente encabezado, otra enumera todos los enlaces de la página, otra va directa a la región principal. Para ellos, el rol y el nombre de cada elemento son toda la interfaz. Un botón que en pantalla parece evidente pero no tiene texto se anuncia como “button”, y eso es todo lo que oyen.
Cómo se construye la transcripción
Nuestro servidor descarga la página una vez y recorre el <body> como lo hace el software de asistencia. El <title> de la página va primero, porque es lo primero que se dice al abrir una página. Después, cada elemento se convierte en una línea:
- Regiones: banner, navigation, main, complementary, content info, search, además de regiones y formularios con nombre.
- Encabezados con su nivel, enlaces con su destino, botones con su estado (expandido, contraído, pulsado).
- Campos de formulario con su tipo y estado: “check box, not checked”, “combo box”, “edit, email, required”.
- Imágenes, marcos, listas con su número de elementos y tablas con su número de filas y columnas.
Calculamos el nombre de cada elemento en el orden que usan los navegadores: aria-labelledby, luego aria-label, luego la fuente nativa (alt, <label>, contenido de texto) y por último title. Todo lo que lleve hidden, aria-hidden="true" o un display:none en línea se deja fuera, igual que el contenido de un <details> cerrado. Las imágenes con alt="" se omiten y se cuentan como decorativas.
Pulsa Listen y el motor de voz de tu navegador lee las líneas. Los roles se dicen en inglés. El contenido se lee con una voz que coincide con el atributo lang de la página cuando tu dispositivo tiene una, y la voz cambia en los pasajes marcados con su propio lang.
Qué significan las marcas
| Marca | Lo que oye quien escucha | Solución |
|---|---|---|
| no alt | “Unlabeled image”, a veces seguido del nombre del archivo | Añade texto alt, o alt="" si la imagen es decorativa |
| empty link, no name | “Link” o “button” a secas | Texto visible, un alt en el icono o aria-label |
| no label | “Edit” sin ninguna pregunta | <label for="…"> unido al id del campo |
| placeholder only | Una pista que quizá no se lea nunca | Una etiqueta de verdad junto al campo |
| vague text, repeated text | “Read more” cinco veces, cada uno hacia un sitio distinto | Nombra el destino en el enlace |
| skips a level, empty | Un esquema con huecos | Pasa de h2 a h3, nunca directo a h4 |
| no title, no headers | “Frame”; valores de tabla sin su columna | title en el <iframe>; celdas <th> |
Una marca roja significa que el elemento no tiene ningún nombre. Una marca ámbar significa que tiene uno, pero el nombre no ayuda. El resumen también señala que falte el idioma de la página, que falte un <h1> o que falte la región principal, y te dice cuántos elementos vienen antes del contenido principal. Si ese número es alto, cada visita a cada página empieza con el mismo recital largo de tu menú.
Tres formas de usar los filtros
- Selecciona Headings y lee solo esa lista. Debería funcionar como un índice de la página.
- Selecciona Links. Cada línea tiene que tener sentido sin la frase que la rodea.
- Selecciona Fields and buttons, cierra los ojos y pulsa Listen. Deberías poder saber qué te pide cada control.
Selecciona cualquier línea para reiniciar la lectura desde ahí. El control de velocidad te da una idea del ritmo que eligen los usuarios habituales, que suele estar muy por encima del habla normal.
Una aproximación, con límites conocidos
La transcripción sale del HTML tal como lo envió el servidor. No ejecutamos JavaScript ni aplicamos hojas de estilo, así que falta el contenido añadido por script y se sigue leyendo el contenido oculto con una clase de CSS. El tiempo de escucha es una estimación basada en unas 170 palabras por minuto. Las páginas muy largas se cortan en 1,200 elementos. Además, cada lector de pantalla real tiene su propio vocabulario y sus propios atajos, así que prueba con al menos uno antes de publicar. NVDA es gratuito en Windows, y VoiceOver viene incluido en macOS y iOS.
Preguntas frecuentes
¿Es lo mismo que probar con NVDA o VoiceOver?
No. Muestra el orden, los roles y los nombres con los que trabaja un lector de pantalla, y ahí está la mayoría de los problemas. No reproduce el comportamiento interactivo, como menús que se abren, anuncios en vivo o el foco que entra en un diálogo. Úsalo para encontrar problemas rápido y confírmalos después con un lector de pantalla real.
¿Por qué la voz lee mi página con el acento equivocado?
O la página no declara un idioma con <html lang="…">, o tu dispositivo no tiene instalada una voz para ese idioma. La línea de estado sobre la transcripción dice qué voz se está usando. Los lectores de pantalla reales se comportan igual.
¿Por qué falta en la transcripción parte del texto de mi página?
Probablemente lo añadió JavaScript después de cargar la página, o está dentro de un elemento <details> cerrado o de un contenedor con aria-hidden. Solo leemos el HTML que entrega el servidor.
¿Qué debería anunciar un lector de pantalla para un logo?
El nombre de la organización y, si el logo es un enlace, adónde lleva: alt="Acme, home page". No escribas “logo” a secas, y no omitas el alt, o el enlace se anunciará por el nombre del archivo o por su dirección.
¿Cuántos enlaces antes del contenido principal son demasiados?
No hay un límite fijo, porque un enlace para saltar al contenido y un elemento <main> permiten pasarlos con una sola pulsación. Sin esas dos cosas, cualquier cantidad por encima de un puñado de elementos cansa en la tercera página.