Lectores de pantalla: nombres, roles y mensajes

No hace falta ser experto

Las personas ciegas usan lectores de pantalla con una velocidad y una destreza que un QA no va a alcanzar en una tarde. No es el objetivo. El objetivo es escuchar lo que el producto le dice a esa persona, y detectar cuando no le dice lo necesario.

Usa el que trae tu sistema:

Nombre, rol y estado

Cada control tiene que anunciar tres cosas (4.1.2 Nombre, función, valor):

• Nombre: qué es o qué hace. "Eliminar producto", no "botón".
• Rol: qué tipo de control es: botón, enlace, casilla, pestaña.
• Estado: si está marcado, expandido, seleccionado o deshabilitado.

Los bugs más comunes:

• botones con solo un ícono y sin nombre: el lector dice "botón" y nada más;
• un div con apariencia de botón: el lector no lo anuncia como botón y el teclado no lo activa;
• un menú desplegable que no anuncia si está abierto o cerrado.

Imágenes

Toda imagen con información necesita texto alternativo (1.1.1 Contenido no textual) que diga lo que la imagen comunica, no el nombre del archivo:

• un logo que lleva a la portada: "CausPro, ir a la portada";
• un gráfico: lo que muestra, o un resumen con los datos al lado;
• una imagen decorativa: texto alternativo vacío, para que el lector la ignore.

Títulos y estructura

Muchas personas con lector de pantalla recorren una página saltando de título en título. Por eso los títulos tienen que estar marcados como títulos y en orden: un H1 para la página, H2 para las secciones, H3 dentro de ellas (1.3.1 Información y relaciones). Un texto grande en negrita que no está marcado como título es invisible para esa forma de navegar.

Formularios y errores

Los formularios concentran los bugs que más impiden terminar un trámite:

• cada campo tiene una etiqueta asociada, no solo un texto gris dentro del campo que desaparece al escribir;
• los campos obligatorios se anuncian como obligatorios;
• un error dice qué campo y por qué (3.3.1 Identificación de errores), y se anuncia; un borde rojo sin texto no lo escucha nadie.

Mensajes que aparecen solos

"Producto agregado al carrito", "Guardado", "Hay 3 resultados": si aparecen sin mover el foco, el lector no se entera, salvo que se anuncien. Es el criterio 4.1.3 Mensajes de estado, y se resuelve con regiones que el lector vigila (aria-live). Para probarlo: provoca el mensaje con el lector encendido y escucha si lo anuncia.