Lector de pantalla

Software que convierte texto y elementos de la interfaz en voz sintética o Braille, permitiendo que personas ciegas o con baja visión naveguen y usen aplicaciones informáticas.

Lector de pantalla

Definición Técnica

Un lector de pantalla (screen reader) es una tecnología de asistencia que convierte el contenido visual de una pantalla en voz sintética o en texto Braille mediante una línea Braille. Permite que personas ciegas o con baja visión naveguen y usen aplicaciones informáticas, sitios web y sistemas operativos.

Cómo Funciona

Proceso de Lectura

Acceso al contenido: El lector accede al árbol de accesibilidad del navegador
Interpretación: Analiza la estructura semántica y atributos ARIA
Síntesis: Convierte la información en voz o Braille
Navegación: Permite al usuario moverse por el contenido

Información que Lee

Nombre accesible: Texto que identifica elementos
Rol: Tipo de elemento (botón, enlace, encabezado)
Estado: Estado actual (expandido, seleccionado, deshabilitado)
Valor: Contenido de campos de formulario
Descripción: Información adicional (aria-describedby)

Lectores de Pantalla Principales

Windows

NVDA (NonVisual Desktop Access)

Gratuito y de código abierto
Más usado según encuestas
Actualizaciones frecuentes
Comunidad activa

JAWS (Job Access With Speech)

Comercial (licencia anual)
Muy completo y potente
Ampliamente usado en entornos corporativos
Scripts personalizables

Narrator

Integrado en Windows
Mejorado significativamente en Windows 10/11
Opción básica gratuita

macOS / iOS

VoiceOver

Integrado en macOS e iOS
Muy completo y potente
Gestos táctiles en iOS
Comandos de teclado en macOS

Android

TalkBack

Integrado en Android
Gestos táctiles
Navegación por exploración táctil
Personalizable

Linux

Orca

Gratuito y de código abierto
Integrado en GNOME
Soporte para múltiples aplicaciones

Comandos Comunes

Navegación Básica

Tab / Shift+Tab: Navegar entre elementos interactivos
Flechas: Navegar por texto y elementos
H: Saltar al siguiente encabezado
L: Saltar al siguiente enlace
B: Saltar al siguiente botón
F: Saltar al siguiente formulario
Espacio / Enter: Activar elemento

Lectura

Ctrl: Detener lectura
Flecha abajo: Leer siguiente línea
Flecha arriba: Leer línea anterior
Insert+F: Leer siguiente palabra
Insert+S: Leer siguiente oración

Información

Insert+Tab: Leer elemento actual
Insert+T: Leer título de la página
Insert+B: Leer barra de estado

Cómo Diseñar para Lectores de Pantalla

HTML Semántico

<!-- ✅ Correcto: Semántica clara -->
<nav aria-label="Navegación principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/productos">Productos</a></li>
  </ul>
</nav>

<!-- El lector anunciará: "Navegación principal, lista con 2 elementos, enlace, Inicio" -->

Nombres Accesibles

<!-- ✅ Correcto: Nombre descriptivo -->
<button aria-label="Cerrar ventana modal">
  ×
</button>
<!-- NVDA: "Cerrar ventana modal, botón" -->

<!-- ❌ Incorrecto: Sin nombre -->
<button onclick="close()">×</button>
<!-- NVDA: "botón" (no descriptivo) -->

Estados y Propiedades

<!-- ✅ Correcto: Estado anunciado -->
<button 
  aria-expanded="false"
  aria-controls="menu"
  aria-label="Menú">
  ☰
</button>
<ul id="menu" aria-hidden="true">
  <li><a href="/">Inicio</a></li>
</ul>

<!-- NVDA: "Menú, botón, colapsado, para expandir presiona Espacio" -->

Formularios

<!-- ✅ Correcto: Label asociado y ayuda -->
<label for="email">Correo electrónico</label>
<input 
  type="email" 
  id="email"
  aria-required="true"
  aria-describedby="email-help">
<small id="email-help">Usaremos este email para contactarte</small>

<!-- NVDA: "Correo electrónico, editar, requerido, Usaremos este email..." -->

Errores Comunes

❌ Evitar

Elementos sin nombre accesible

<button>×</button> <!-- Sin aria-label -->

Contenido solo visual

<div class="icono">✓</div> <!-- Sin texto alternativo -->

Estructura incorrecta

<div class="heading">Título</div> <!-- Debería ser <h1> -->

Estados no anunciados

<div class="menu hidden">...</div> <!-- Sin aria-hidden -->

✅ Correcto

Nombres descriptivos

<button aria-label="Cerrar ventana">×</button>

Texto alternativo

<img src="check.png" alt="Verificado">

Semántica HTML

<h1>Título</h1>

Estados ARIA

<div class="menu" aria-hidden="true">...</div>

Testing con Lectores de Pantalla

Proceso Recomendado

Instalar NVDA (gratuito para Windows)
Activar el lector: Insert+Z
Navegar el sitio: Solo con teclado
Verificar anuncios: ¿Se lee correctamente?
Probar interacciones: ¿Se pueden activar elementos?
Documentar problemas: Registrar fallos

Checklist de Testing

Todos los botones tienen nombres descriptivos
Los enlaces tienen texto significativo
Los formularios tienen labels asociados
Los encabezados están en orden correcto
Los cambios de estado se anuncian
Los errores se identifican claramente
La navegación es lógica y predecible

Estadísticas de Uso

Según WebAIM Survey 2021:

NVDA: 40.6% de usuarios
JAWS: 40.1% de usuarios
VoiceOver: 12.9% de usuarios
Narrator: 2.8% de usuarios
Otros: 3.6% de usuarios

Referencias

Términos Relacionados

Tecnologías de asistencia
Navegación por teclado
ARIA
Nombre accesible
Árbol de accesibilidad