M

MLOG

Español

Una guía completa para implementar tooltips accesibles usando estados hover y focus, garantizando la usabilidad para todos, incluidos usuarios con discapacidades.

Implementación de Tooltips: Información Accesible con Hover y Focus

Los tooltips (o descripciones emergentes) son pequeños mensajes de ayuda contextual que aparecen cuando un usuario sitúa el puntero del ratón sobre un elemento o lo enfoca. Pueden proporcionar información adicional, aclarar el propósito de un elemento u ofrecer pistas sobre cómo usar una función. Sin embargo, los tooltips pueden convertirse fácilmente en pesadillas de accesibilidad si no se implementan correctamente. Esta guía describe las mejores prácticas para crear tooltips que sean utilizables por todos, incluidos los usuarios con discapacidades.

Por Qué la Accesibilidad es Importante para los Tooltips

La accesibilidad no se trata solo de cumplir normativas; se trata de crear una mejor experiencia de usuario para todos. Cuando los tooltips no son accesibles, pueden excluir a los usuarios que dependen de tecnologías de asistencia como lectores de pantalla, navegación por teclado o entrada de voz. Considere estos escenarios:

Al seguir las mejores prácticas de accesibilidad, podemos asegurarnos de que los tooltips mejoren en lugar de obstaculizar la experiencia del usuario para todos.

Principios Clave para Tooltips Accesibles

Los siguientes principios son cruciales para crear tooltips accesibles:

  1. Proporcionar acceso alternativo: Asegurarse de que los tooltips sean accesibles tanto mediante hover como con el foco del teclado.
  2. Usar atributos ARIA: Utilizar atributos ARIA (Accessible Rich Internet Applications) para identificar y describir correctamente los tooltips a las tecnologías de asistencia.
  3. Gestionar el foco: Controlar a dónde va el foco cuando se muestra y se oculta un tooltip.
  4. Asegurar contraste suficiente: Proporcionar suficiente contraste de color entre el texto y el fondo del tooltip.
  5. Permitir tiempo suficiente: Dar a los usuarios tiempo suficiente para leer el contenido del tooltip.
  6. Hacerlos descartables: Proporcionar una forma clara de cerrar el tooltip.
  7. Evitar el uso excesivo: Usar los tooltips con moderación y solo cuando sea necesario.

Técnicas de Implementación

1. Usando Hover y Focus

El aspecto más crítico de los tooltips accesibles es garantizar que sean accesibles tanto para usuarios de ratón como de teclado. Esto significa que el tooltip debe aparecer tanto al pasar el cursor sobre el elemento (hover) como cuando el elemento recibe el foco.

HTML:

<a href="#" aria-describedby="tooltip-example">Enlace de Ejemplo</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Este es un tooltip de ejemplo.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Asegura que el tooltip esté por encima */
}

Explicación:

JavaScript (Control Avanzado - Opcional):

Aunque el CSS puede manejar un simple mostrar/ocultar, JavaScript permite un control más robusto, especialmente cuando los tooltips se generan dinámicamente o necesitan un comportamiento más complejo.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. Usando Atributos ARIA

Los atributos ARIA son esenciales para proporcionar información semántica a las tecnologías de asistencia. Aquí hay un desglose de los atributos clave:

Ejemplo:

<button aria-describedby="help-tooltip">Enviar</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Haga clic aquí para enviar el formulario.</div>

JavaScript (para aria-hidden):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. Gestionando el Foco

Cuando aparece un tooltip, generalmente *no debe* robar el foco del elemento desencadenante. El foco debe permanecer en el elemento que activó el tooltip. Esto asegura que los usuarios de teclado puedan continuar navegando por la página sin interrupciones inesperadas.

Sin embargo, puede haber situaciones en las que *desee* mover el foco al tooltip, particularmente si el tooltip contiene elementos interactivos (por ejemplo, enlaces, botones). En este caso, asegúrese de que:

En la mayoría de los casos, se prefiere evitar la gestión del foco dentro del propio tooltip por simplicidad y usabilidad.

4. Asegurando Contraste Suficiente

El contraste de color es crucial para la legibilidad. Asegúrese de que el color del texto en sus tooltips tenga suficiente contraste con el color de fondo. Las Pautas de Accesibilidad al Contenido Web (WCAG) recomiendan una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt en negrita).

Utilice verificadores de contraste en línea para confirmar que sus elecciones de color cumplen con los estándares de accesibilidad. Ejemplos de verificadores de contraste incluyen:

Ejemplo (Buen Contraste):

.tooltip {
  background-color: #000;
  color: #fff;
}

Ejemplo (Contraste Pobre):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Permitiendo Tiempo Suficiente

Los usuarios necesitan tiempo suficiente para leer el contenido del tooltip. Evite los tooltips que desaparecen demasiado rápido. Si bien no hay un número mágico, apunte a un tiempo mínimo de visualización de unos pocos segundos. Además, el tooltip debe permanecer visible mientras el usuario mantenga el cursor sobre el elemento desencadenante o lo tenga enfocado. Si necesita cerrar el tooltip debido a otros eventos, proporcione un indicador de que el tooltip se cerrará.

Si el contenido del tooltip es extenso, considere proporcionar una forma para que el usuario lo descarte manualmente (por ejemplo, un botón de cierre o presionando la tecla Escape).

6. Haciéndolos Descartables

Aunque los tooltips a menudo desaparecen automáticamente cuando el usuario aleja el ratón o quita el foco, es una buena práctica proporcionar una forma clara de descartarlos manualmente, especialmente para tooltips largos o que contienen elementos interactivos.

Métodos para Descartar Tooltips:

Ejemplo (Botón de Cierre):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Este es el contenido de mi tooltip.
  <button onclick="hideTooltip()">Cerrar</button>
</div>

Ejemplo (Tecla Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Reemplace con su función real para ocultar el tooltip
  }
});

7. Evitando el Uso Excesivo

Los tooltips deben usarse con moderación y solo cuando proporcionan información verdaderamente útil. El uso excesivo de tooltips puede saturar la interfaz, distraer a los usuarios y crear una experiencia frustrante.

Alternativas a los Tooltips:

Consideraciones Avanzadas

Contenido Dinámico

Si el contenido de su tooltip se genera dinámicamente (por ejemplo, se carga desde una API o se actualiza según la entrada del usuario), asegúrese de que el atributo aria-describedby y la visibilidad del tooltip se actualicen en consecuencia. Use JavaScript para gestionar estas actualizaciones.

Posicionamiento

Considere cuidadosamente el posicionamiento de sus tooltips. Evite colocarlos de manera que oculten contenido importante o causen cambios en el diseño. Tenga en cuenta los diferentes tamaños de pantalla y resoluciones, y use CSS para asegurarse de que los tooltips estén siempre visibles dentro del viewport.

Dispositivos Móviles

Los tooltips tradicionalmente dependen de interacciones de hover, que no están disponibles en dispositivos táctiles. Para dispositivos móviles, considere usar métodos de interacción alternativos, como:

Probando tus Tooltips

Pruebe exhaustivamente sus tooltips para asegurarse de que sean accesibles para todos los usuarios. Use una combinación de pruebas manuales y herramientas de prueba de accesibilidad automatizadas.

Métodos de Prueba:

Internacionalización (i18n) y Localización (l10n)

Al desarrollar tooltips para una audiencia global, tenga en cuenta la internacionalización y la localización:

Conclusión

Implementar tooltips accesibles requiere una planificación cuidadosa y atención al detalle. Al seguir los principios y técnicas descritos en esta guía, puede crear tooltips que sean utilizables por todos, independientemente de sus habilidades. Recuerde que la accesibilidad es un proceso continuo, así que continúe probando y refinando sus tooltips para asegurarse de que satisfagan las necesidades de todos sus usuarios.

Recursos