Índice
- 1 – Introducción
- 2 – Ofrece más de un canal
- 3 – Las regiones activas
- 4 – Roles especiales
- 5 – Control de la información
- 6 – Conclusiones
1 – Introducción
Las páginas web actuales son fundamentalmente dinámicas. No importa si se trata de recursos multimedia o de simple refresco de datos. La pantalla muestra información nueva a cada segundo. Los mensajes de aviso y error se suceden. ¿Cómo mantener al tanto a un usuario que no dispone de todos sus sentidos?
En este tutorial vamos a ver algunas técnicas específicas para lidiar con esta situación. Desde simples maneras de proceder al uso de atributos de WAI-ARIA.
2 – Ofrece más de un canal
Ponte en situación: te tapan los ojos o los oídos, y te enfrentan a un sistema dinámico en el que ocurren cosas constantemente. Si todavía puedes ver, quizás llegues a acceder a la información, pero puede que sea tarde. Te has perdido la notificación sonora que alertaba del riesgo de fusión del núcleo. Tu asiento acaba de convertirse en el epicentro de Chernóbil.
Por el contrario, si aún conservas el oído, estarás disfrutando tranquilamente de tu lista de reproducción preferida en Spotify. En la pantalla parpadean unas letras enormes que vaticinan la catástrofe inminente. La ignorancia es la base de la felicidad. ¿Resultado? Idéntico.
Quizás resulte un ejemplo un poco extremo, pero es lo que podría ocurrir si no tienes en cuenta varias vías distintas para comunicar la información. Incluso si dispones de todos tus sentidos, puedes quedarte adormilado o estar mirando el móvil mientras toda la vida que conoces se va al garete.
Por eso, una de las principales cuestiones que debes tener en cuenta es no depender nunca de un solo sentido en estos escenarios dinámicos, en especial cuando una interacción incorrecta puede tener consecuencias graves.
3 – Las regiones activas
Lo visto anteriormente es fundamental, pero todavía no es suficiente. Planteemos de nuevo la hipótesis de la ceguera. Ahora las alarmas perforan tus tímpanos mientras el uranio se calienta cada vez más. Sabes que pasa algo, seguro. Pero, ¿qué? Te pones a buscar como un loco por toda la interfaz con tu lector de pantalla. Para cuando encuentras la respuesta, el sistema de refrigeración ya no da más de sí. Un temblor sacude todo tu cuerpo. Tienes la certeza de que ese mes no cobras.
Las regiones activas son la solución principal para este tipo de situaciones. Cuando la información que se modifica en pantalla es relevante, la tecnología de asistencia debería poder notificarla de forma automática al usuario. Mucho más rápido que tener que buscarla, ¿verdad?
WAI-ARIA nos proporciona el atributo aria-live, que acepta uno de estos dos valores:
- Polite: El mensaje se encola y espera a que acaben de anunciarse otros avisos.
- Assertive: El mensaje tiene prioridad e interrumpe la notificación de otros mensajes.
Como norma general, deberíamos usar siempre el valor polite, a menos que el mensaje invalide algún otro mensaje, sea una alerta que requiera la acción del usuario o informe de un problema severo.
Muchas veces encuentro que las páginas utilizan regiones asertivas que impiden la lectura de ciertos mensajes porque se solapan. Este es un comportamiento a evitar.
4 – Roles especiales
Ahora bien, existen ciertos valores para el atributo role que convierten a los elementos en regiones activas con ciertas características especiales. Estos roles pueden ser:
- Log: Marca el elemento como un registro. Se comporta como polite, pero sólo notifica las nuevas entradas. Útil para chats, logs de notificaciones, etc.
- Status: Un área que indica el estado o actualizaciones de algún tipo. Las tecnologías de asistencia pueden ofrecer la posibilidad de informar de este estado.
- Alert: Mensaje de alerta o error. Asertivo, y además puede informarse como alerta por la tecnología de asistencia.
- Progressbar: Informa del progreso de algún proceso.
- Marquee: Para texto que hace scroll automático, como las marquesinas de algunas páginas.
- Timer: Marca el área como algún tipo de reloj o temporizador.
Siempre que sea posible, es preferible utilizar alguno de estos roles en lugar del atributo aria-live. Sin embargo, su uso debe estar bien justificado o podría causar confusión en los usuarios.
5 – Control de la información
Además de marcar una región de la página como activa, podemos controlar la información que se transmitirá a las tecnologías de asistencia. Los atributos que lo permiten son los siguientes:
- Aria-relevant: Permite indicar qué cambios son relevantes para informar. Los valores permitidos son uno o varios de los siguientes: additions, removals, text, all. Por defecto se utiliza «additions text».
- Aria-atomic: Permite indicar si se ofrecerá el mensaje completo del área (true) o sólo las modificaciones (false).
- Aria-busy: Sirve para indicar que una región está sufriendo cambios y no debe ser usada hasta que se terminen. Cuando se aplica a una región activa, suspende las notificaciones hasta que vuelve al valor false. Entonces, los mensajes retenidos se anuncian de una sola vez.
6 – Conclusiones
Informar al usuario adecuadamente de lo que ocurre en el sistema es fundamental. No importa qué dificultades sensoriales pueda tener. Es nuestra responsabilidad asegurarnos de que la información le llega adecuadamente en tiempo y forma. Disponemos de herramientas y técnicas pensadas para ello, ¡así que no hay excusas!
