¿Qué es Vista previa de lector de pantalla?

Vista Previa de Lector de Pantalla muestra cómo la tecnología de asistencia interpreta tu contenido HTML. Expone el nombre accesible, el rol y el orden de lectura de cada elemento, para que detectes etiquetas faltantes, estructura de encabezados rota y problemas de ARIA antes de que los usuarios reales los encuentren.

La herramienta analiza tu HTML del mismo modo que un lector de pantalla construye su árbol de accesibilidad: descarta el layout visual, resuelve aria-label y aria-labelledby, recoge el alt de las imágenes y aplana el resultado en una secuencia de lectura lineal. El panel de incidencias marca enlaces sin nombre accesible, saltos de nivel en los encabezados, imágenes sin alt y controles de formulario sin etiqueta.

Cómo usar

1. Pega tu contenido HTML o introduce una URL para analizar.
2. Revisa el orden de lectura linealizado y el árbol de accesibilidad de los elementos.
3. Corrige los problemas señalados y vuelve a probar hasta que el flujo de lectura sea claro.

Cuándo usar

• Antes de publicar una landing que tiene que pasar una auditoría WCAG AA.
• Para investigar por qué un usuario de NVDA o VoiceOver reportó un menú confuso.
• Revisar el HTML de un widget de terceros tras una actualización por si rompió la accesibilidad.

Resultado

Un desarrollador pega un menú de navegación. La herramienta revela que 3 enlaces no tienen nombre accesible y que el orden de encabezados salta de h1 a h4, causando confusión a los usuarios de lectores de pantalla.

Preguntas frecuentes

¿Esto sustituye a probar con un lector de pantalla real?

No. NVDA, JAWS y VoiceOver tienen sus propias rarezas en cómo anuncian regiones live, cabeceras de tabla y contenido dinámico. Usa la herramienta para cazar los problemas obvios (etiquetas que faltan, orden de encabezados roto) antes de invertir tiempo en un lector real.

¿Por qué un icono decorativo me sale marcado como problema?

Los lectores de pantalla anuncian cada img por defecto. Si el icono es puramente decorativo, ponle un alt vacío y aria-hidden="true", y la herramienta lo saltará en el orden de lectura. No uses alt="icono" o alt="decoración": peor que nada.

¿Cuál es el orden correcto de los encabezados?

Exactamente un h1 por página, y nunca saltarse niveles al bajar (después de un h2 no puede ir un h4). Subir está bien. Los usuarios de lector de pantalla navegan saltando entre encabezados, así que una jerarquía rota convierte la página en un laberinto.

¿Todo elemento interactivo debe tener aria-label?

No. Un botón con texto visible no necesita aria-label, ese texto ya hace de nombre accesible. Añade aria-label solo cuando no hay texto visible (botones de solo icono) o cuando el texto no es descriptivo (una fila entera de "Leer más").

¿Puedo pegar una página entera?

Sí, pega el HTML completo. La herramienta ignora scripts, estilos y meta tags, y se centra en el body del documento. Para páginas enormes conviene comprobar una sección cada vez para que la lista de incidencias siga siendo legible.

Herramientas relacionadas