a11y tips #8: tooltips accesibles

Los tooltips, también denominados descripciones emergentes o globos de ayuda, son uno de esos componentes aparentemente sencillos cuya implementación puede plantear importantes problemas de accesibilidad.

En esta entrada se recogen diferentes recomendaciones para implementar tooltips accesibles y, especialmente, para determinar cuándo es preferible utilizar otro patrón de diseño.

Qué es y para qué sirve un tooltip

En diseño web, un tooltip es un pequeño contenedor emergente que muestra información complementaria relacionada con un elemento de la interfaz. Se presenta automáticamente cuando el elemento asociado recibe el foco del teclado o cuando el puntero del ratón se sitúa sobre él.

Habitualmente, se utiliza para ampliar la información proporcionada por un botón, un campo de formulario u otro control sin ocupar espacio adicional de manera permanente. Por ejemplo, puede explicar brevemente la función de un icono o aportar una indicación adicional y contextual sobre un campo.

A diferencia de otros componentes emergentes, los tooltips no reciben el foco ni forman parte del orden de tabulación. Por este motivo, su contenido debe limitarse a texto descriptivo y no puede incluir enlaces, botones, campos de formulario u otros elementos interactivos.

Conviene tener en cuenta que el patrón de tooltip contemplado en la ARIA authoring practices guide todavía se considera un trabajo en curso y no cuenta con el consenso definitivo del grupo responsable.

Características principales de un tooltip

• Presenta información breve y complementaria sobre un elemento de la interfaz.
• Permanece oculto de forma predeterminada.
• Se muestra automáticamente cuando el elemento asociado recibe el foco del teclado o cuando el puntero se sitúa sobre él.
• El foco permanece siempre en el elemento que activa el tooltip.
• Desaparece cuando el elemento pierde el foco o cuando el puntero abandona tanto el elemento como el propio tooltip.
• Se debe poder cerrar mediante la tecla Escape.
• No contiene elementos interactivos.
• Se vincula semánticamente con el elemento al que describe mediante el atributo aria-describedby.

Utilidad, uso previsto y consideraciones de diseño

Los tooltips pueden resultar útiles para:

• Proporcionar una explicación breve sobre la función de un control.
• Ampliar la información asociada a un botón cuyo texto visible debe ser necesariamente corto.
• Aclarar el significado de un icono, siempre que este cuente también con un nombre accesible.
• Ofrecer una indicación complementaria y no esencial sobre un campo de formulario.

No deben utilizarse cuando:

• La información es imprescindible para comprender o completar una tarea.
• El contenido necesita incluir enlaces, botones u otros elementos interactivos.
• Se requiere incorporar información extensa, varios párrafos o una estructura compleja.
• Se pretende mostrar un mensaje de error, una alerta o información sobre el resultado de una acción.
• Se desea definir un término dentro de un párrafo y es importante que la explicación se lea en contexto.
• El contenido debe estar disponible para imprimirlo, copiarlo o consultarlo de manera permanente.

En estos casos, es preferible mostrar la información directamente en la página o utilizar otro patrón de diseño. Por ejemplo:

• Para las instrucciones de un formulario, se puede incluir un texto visible debajo del campo y asociarlo mediante aria-describedby.
• Para información extensa o con elementos interactivos, se puede utilizar un diálogo modal o no modal activado mediante un botón.
• Para definiciones o aclaraciones dentro de un texto, se puede recurrir a notas al pie accesibles.

Ten en cuenta que:

• Los tooltips no deben ser el único medio para proporcionar información esencial. Los dispositivos táctiles carecen de un estado equivalente al hover y algunas combinaciones de navegador y lector de pantalla pueden anunciar el contenido sin mostrarlo visualmente.
• No existe un elemento HTML nativo específico para crear tooltips.
• El atributo title no constituye una alternativa accesible. Su contenido no puede mostrarse de forma fiable mediante el teclado o una pantalla táctil y su comportamiento varía entre navegadores y ayudas técnicas.
• Un icono de información que abre contenido mediante un clic no responde estrictamente al patrón de tooltip. Si el usuario solicita expresamente que se muestre el contenido, probablemente se trate de un botón que controla un diálogo o una descripción desplegable.
• Los estudios con diferentes lectores de pantalla muestran limitaciones en determinadas situaciones. Por ejemplo, NVDA y JAWS pueden no anunciar los tooltips integrados en bloques de texto cuando se navega en modo lectura, mientras que Narrator presenta problemas con aria-describedby aplicado a enlaces. Por este motivo, conviene reservar este patrón para controles sencillos y probarlo con diferentes combinaciones de navegador y ayudas técnicas.

Requisitos de accesibilidad

• El elemento que activa el tooltip debe poder recibir el foco del teclado. Si se trata de un control, es recomendable utilizar un elemento HTML nativo como <button>, <a> o <input type="text" />.
• El tooltip debe mostrarse tanto al situar el puntero sobre el elemento como cuando este recibe el foco del teclado. Implementarlo únicamente mediante :hover excluye a las personas que navegan con el teclado.
• El elemento disparador debe presentar un indicador de foco claramente visible.
• El foco debe permanecer en el elemento disparador. Nunca debe desplazarse automáticamente al tooltip.
• El tooltip debe poder cerrarse mediante la tecla Escape sin desplazar el foco.
• Cuando se activa mediante el teclado, debe permanecer visible mientras el elemento asociado conserve el foco.
• Cuando se activa mediante el puntero, debe permanecer visible mientras este se encuentre sobre el elemento disparador o sobre el propio tooltip. Esto permite ampliar el contenido, acercarse a él o leerlo con comodidad.
• El tooltip no debe desaparecer por sí solo después de un tiempo determinado.
• Si se aplica un pequeño retraso antes de mostrarlo, este no debe dificultar el acceso a la información. También conviene evitar que desaparezca inmediatamente cuando el puntero abandona el elemento disparador.
• El contenido debe ser breve, claro y comprensible.
• El texto y el fondo deben presentar un contraste mínimo de 4,5:1, o de 3:1 cuando se trate de texto grande.
• El contenido debe poder ampliarse hasta un 200 % sin perder información ni funcionalidad.
• El tooltip no debe quedar cortado por los límites de la ventana, otros contenedores o reglas CSS como overflow: hidden.
• El elemento disparador debe incorporar aria-describedby con el identificador del tooltip.
• El contenedor emergente debe incorporar role="tooltip".
• No se deben utilizar aria-expanded ni aria-haspopup. Un tooltip aparece automáticamente y no se considera un menú, un diálogo ni otro tipo de ventana emergente controlada por la persona usuaria.
• No es recomendable asignar un nombre accesible al tooltip mediante aria-label o aria-labelledby. En algunas situaciones, ese nombre puede sustituir a su contenido como descripción del elemento disparador.
• No debe utilizarse aria-live para anunciar su aparición. La relación establecida mediante aria-describedby ya permite que las ayudas técnicas comuniquen la descripción al recibir el foco.
• El tooltip no debe contener enlaces, botones ni otros elementos que necesiten recibir el foco. Si el contenido requiere interacción, debe utilizarse un diálogo.

Criterios de conformidad WCAG relacionados

• 1.4.3: Contraste (mínimo) (nivel AA).
• 1.4.13: Contenido señalado con el puntero o que tiene el foco (nivel AA).
• 2.1.1: Teclado (nivel A).
• 2.4.7: Foco visible (nivel AA).
• 2.4.11: Foco no oculto (mínimo) (nivel AA).
• 4.1.2: Nombre, función, valor (nivel A).

El criterio 1.4.13 resulta especialmente relevante. Este establece que el contenido adicional mostrado al situar el puntero o el foco sobre un elemento debe ser:

• Descartable: debe poder cerrarse sin desplazar el puntero ni el foco. En este caso, mediante la tecla Escape.
• Hoverable: debe ser posible mover el puntero sobre el contenido emergente sin que desaparezca.
• Persistente: debe permanecer visible hasta que la persona usuaria lo cierre, retire el puntero o desplace el foco.

Código HTML, CSS y JS

En el ejemplo siguiente, un botón para guardar un borrador cuenta con un nombre accesible proporcionado mediante texto oculto visualmente. El tooltip añade una descripción complementaria a través de aria-describedby.

El texto «Guardar borrador» constituye el nombre accesible del botón. El contenido del tooltip no sustituye ese nombre, sino que aporta una descripción adicional.

El atributo aria-describedby se encuentra en el elemento disparador y apunta al atributo id del contenedor con role="tooltip". No es necesario modificar esta relación cada vez que el tooltip se muestra u oculta.

En un proyecto real, puede resultar necesario calcular mediante JavaScript la posición del componente para impedir que quede fuera de la ventana o cortado por otro contenedor.

Código JavaScript

El código JavaScript del ejemplo anterior muestra el tooltip cuando el botón recibe el foco o cuando el puntero entra en el área del componente. También permite cerrarlo mediante Escape tras llegar con el teclado.

Al escuchar los eventos del puntero sobre el contenedor común, el tooltip permanece visible cuando este se desplaza desde el botón hasta el texto emergente. De esta manera, se cumple el requisito de que el contenido sea hoverable.

El evento asociado al foco se aplica únicamente al botón. El tooltip no incorpora tabindex ni recibe el foco en ningún momento.

Contenido complejo y alternativas al tooltip

Si el contenido requiere encabezados, listas extensas, enlaces, botones o cualquier otro elemento interactivo, no debe utilizarse role="tooltip".

En su lugar, se puede incorporar un botón que abra un diálogo modal o no modal. En este caso:

• El contenido se mostrará mediante una acción explícita, como un clic o la pulsación de Enter o la barra espaciadora.
• Los elementos interactivos podrán formar parte del orden de tabulación.
• Será necesario gestionar correctamente el foco, el cierre mediante Escape y el retorno del foco al disparador.

Cuando la información amplía o define un término dentro de un párrafo, una nota al pie accesible suele ser una solución más robusta. Este patrón garantiza que la explicación forme parte del contenido y evita los problemas que algunos lectores de pantalla presentan al anunciar aria-describedby en modo lectura.

Uso en frameworks CSS

Diversos frameworks y bibliotecas de componentes incluyen sus propias implementaciones de tooltips. No obstante, la presencia del componente no garantiza por sí sola su accesibilidad.

Antes de utilizarlo, es necesario comprobar que:

• Se muestra tanto mediante el puntero como al recibir el foco del teclado.
• Puede cerrarse mediante Escape.
• Permanece abierto cuando el puntero se sitúa sobre su contenido.
• No desaparece mientras el elemento activador conserva el foco.
  Utiliza correctamente role="tooltip" y aria-describedby.
• No depende únicamente del atributo title.
• No contiene elementos interactivos.
• Se posiciona correctamente al ampliar el contenido o modificar el tamaño de la ventana.
• Funciona con diferentes navegadores, dispositivos táctiles y lectores de pantalla.

Referencias

Le Compte, Rembrand (2026). Tooltips that work for everyone. Eleven Ways. https://elevenways.be/en/articles/tooltips-that-work-for-everyone

MDN Web Docs (2026). ARIA: tooltip role. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role

W3C (2026). Tooltip pattern. ARIA Authoring Practices Guide (APG): How to build accessibility semantics into web patterns and widgets. https://www.w3.org/WAI/ARIA/apg/patterns/tooltip