Resumen
Explicamos que es un 'tooltip', los problemas que puede ofrecer en el ámbito de la accesibilidad digital y soluciones para superarlos.
En primer lugar debemos explicar qué es un ‘tooltip’. Un ‘tooltip’ es un texto breve que suele aparecer en forma de ventana emergente cuando el usuario pasa el puntero del ratón por encima de un elemento. En principio, puede adjuntarse a cualquier elemento HTML utilizando el atributo ‘title’.
Ahora bien, el uso del atributo ‘title’ presenta varios problemas de accesibilidad. Como dijo Steve Faulkner, “si deseas ocultar contenido a usuarios móviles y de tablets, así como a usuarios de tecnología de asistencia o solo teclado, usa el atributo title“.
Posibles barreras de accesibilidad
Los principales problemas o barreras de accesibilidad que se presentan en este ámbito son:
– Usuarios de teclado: Actualmente, al tabular para mover el foco por los elementos de interacción de la página, el navegador no muestra los atributos ‘title’ de dichos elementos.
– Usuarios de lectores de pantalla: Son capaces de leer los atributos ‘title’ siempre y cuando naveguen con tabulador por elementos de interacción (enlaces, botones y formularios). Ahora bien, hay que tener en cuenta que los usuarios de lector de pantallas no navegan únicamente con tabulador, pues esta tecla únicamente salta a elementos focalizables. Utilizan también las flechas para navegar y en este caso el atributo ‘title’ no se lee.
– Usuarios de magnificador de pantalla: El uso de un magnificador de pantalla puede hacer que los ‘tooltip’ sean imposibles de leer. Los ‘tooltip’ incluidos con un atributo ‘title’ sólo se muestran cuando el puntero del ratón se sitúa sobre el elemento que lo desencadena. Si se utiliza un magnificador de pantalla, la parte de la ventana que se ve puede reducirse significativamente. En esta situación, los usuarios tendrán que mover el puntero para desplazarse por el ‘tooltip’ y leer el texto completo. Sin embargo, en cuanto el puntero pase por encima del ‘tooltip’, los navegadores lo ocultarán.
Características de un ‘tooltip’ accesible
La propia W3C tiene la creación de ‘tooltip’ accesible como un trabajo en progreso, aunque se suele estar de acuerdo en que un ‘tooltip’ accesible debe tener las siguientes características:
– Debe ser desplegable utilizando el teclado.
– Debe de poderse leer utilizando lectores de pantallas.
– El usuario debe poder descartarlo cuando lo necesite.
– No debe contener información relevante. La información que muestre debe ser complementaria.
– No debe repetir información para no distraer a los usuarios.
Como podemos ver, utilizar un ‘tooltip’ es bastante complejo si queremos hacerlo accesible al máximo número de perfiles de usuario, por lo que se recomienda evitarlo en la medida de lo posible, ya que estandarizar el componente es complejo.
El ‘TOGGLETIP’, solución
Siempre que se pueda, es mejor utilizar un ‘TOGGLETIP’ en lugar de un ‘tooltip’. De esta forma, el usuario podrá decidir cómo y cuándo mostrar la información pulsando en el elemento adecuado.
Un TOGGLETIP es similar a un ‘tooltip’. La diferencia radica en que el elemento que lo activa es un elemento que recibe el foco de teclado y no se activa solo, sino con un clic de ratón. Un ejemplo de TOGGLETIP es el icono de más información que se adjunta a algunas imágenes. Al ser un componente nativo de html (por regla general, una etiqueta ‘button’) el problema de interacción al enfocar queda resuelto.
En MTP estamos especializados en accesibilidad digital, entre otras áreas del aseguramiento de productos y servicios digitales, y contamos con un servicio de certificación que otorga el sello DInclusive.