F103Mensajes de estado que el lector de pantalla no anuncia

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) lee la parte de la página donde está el usuario. Si un aviso aparece en otro sitio, no lo anuncia por sí solo.

Así, una persona ciega pulsa «Buscar» y no sabe si hay resultados. O envía un formulario de cita previa y no oye que falta un dato. Tiene que recorrer la página entera para adivinar qué ha pasado.

Cómo evitarlo

1. Localice los mensajes de estado: textos que aparecen tras una acción, sin mover el foco, y que informan de un resultado, una espera, un progreso o un error.
2. Ponga al contenedor del mensaje role="status" para avisos normales, o role="alert" para errores y avisos urgentes.
3. Para zonas que se van ampliando, como un chat o un historial, use role="log". También sirven aria-live="polite", aria-live="assertive" o el elemento <output>.
4. Ese contenedor debe estar en la página desde el principio, aunque esté vacío. Después, cambie solo su texto. Si se crea a la vez que el mensaje, muchos lectores de pantalla no lo leen.
5. Si el aviso recibe el foco o lleva a otra página, no es un mensaje de estado y no necesita estas marcas.

Cómo comprobarlo

1. Hacer las acciones que muestran avisos: buscar, añadir al carrito, enviar un formulario, subir un archivo.
2. Confirmar que el aviso aparece sin mover el foco y que informa de un resultado, una espera, un progreso o un error.
3. Con las herramientas del navegador (F12), revisar si el contenedor ya tenía role="status", alert, log o aria-live antes de que apareciera el texto.
4. Repetir la acción con un lector de pantalla (NVDA, JAWS o VoiceOver). Si no anuncia el aviso, hay fallo.

Ejemplo

Código correcto: la zona del aviso existe vacía desde el principio y el script solo cambia su texto.

<form role="search">
  <label for="q">Buscar en la web</label>
  <input id="q" type="search">
  <button>Buscar</button>
</form>
<p id="aviso" role="status"></p>
<script>
  // Tras hacer la búsqueda:
  document.getElementById('aviso').textContent =
    'No hay resultados para su búsqueda.';
</script>