Lectores de pantalla: tu página con los ojos cerrados

La prueba de accesibilidad más reveladora es cerrar los ojos y ESCUCHAR tu página con un lector de pantalla. De repente, todo lo que era "obvio a la vista" desaparece, y solo queda lo que tu HTML comunica de verdad: la estructura, los textos alternativos, las etiquetas. Hoy entiendes cómo "suena" tu página para quien no la ve, y por qué el HTML semántico es la base de todo.

El narrador de audiolibro

Cómo navega: no lee todo, SALTA

Los usuarios de lector de pantalla rara vez escuchan todo de corrido: saltan por ENCABEZADOS, por LANDMARKS (regiones), y piden listas de ENLACES. Por eso la estructura semántica es su mapa:

<!-- LANDMARKS: el SR salta entre estas regiones -->
<header>...</header>
<nav>...</nav>
<main>          <!-- "contenido principal": un salto directo aquí -->
<h1>Título de la página</h1>     <!-- UN solo h1 -->
  <h2>Una sección</h2>            <!-- encabezados EN ORDEN, sin saltar niveles -->
    <h3>Subsección</h3>
</main>
<footer>...</footer>

Regla clave: elige el encabezado por su NIVEL en la jerarquía, no por su tamaño visual (para el tamaño está el CSS). Un <h2> usado "porque se ve del tamaño que quiero" rompe el índice que el SR construye. Los landmarks (<header>, <nav>, <main>, <footer>) son gratis y dejan al usuario saltar directo al contenido — sin ellos, tiene que escuchar el menú entero en cada página.

Los cuatro textos que el SR necesita

<!-- 1. ALT: describe el PROPÓSITO de la imagen, no "imagen de..." -->
<img src="grafico.png" alt="Las ventas subieron 40% en marzo">
<img src="adorno.png" alt="">   <!-- decorativa: alt vacío, el SR la ignora -->
<img src="grafico.png">          <!-- ✗ sin alt: el SR lee "grafico.png" -->

<!-- 2. ETIQUETAS de formulario: cada campo con su <label> -->
<label for="correo">Tu correo</label>
<input id="correo" type="email">   <!-- sin label, el SR anuncia "editar, en blanco" -->

<!-- 3. TEXTO DE ENLACE con sentido fuera de contexto -->
<a href="/precios">clic aquí</a>              <!-- ✗ inútil en una lista de enlaces -->
<a href="/precios">ver planes y precios</a>   <!-- ✓ claro por sí solo -->

<!-- 4. TEXTO OCULTO para dar contexto donde el visual lo daba -->
<button aria-label="Cerrar el menú">✕</button>  <!-- el "✕" solo no dice nada -->

Cada uno resuelve un punto donde el SIGNIFICADO estaba en lo visual y hay que darlo en texto: la imagen (alt), el campo (label), el enlace (texto claro), el icono (aria-label). Si tu página funciona leída en voz alta con solo estos textos, es accesible de verdad.

Cómo probarlo (gratis, ahora)

Mini-reto

Enciende el lector de pantalla de tu sistema y "escucha" la portada de "El Observador" con los ojos cerrados: navega por encabezados (¿tienen orden lógico?), pide la lista de enlaces (¿se entienden solos?), y pasa por las imágenes (¿describen algo o dicen el nombre del archivo?). Arregla los tres peores hallazgos. Vas a descubrir que un sitio "que se ve bien" puede sonar fatal — y ahora sabes arreglarlo.

Qué sigue

Cubriste que tu sitio sea USABLE por todos. El otro pilar de la calidad es que sea RÁPIDO. La próxima lección explica las Core Web Vitals —las métricas con las que Google (y tus usuarios) miden la velocidad percibida— con analogías claras, y cómo medirlas con Lighthouse.