Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Cómo deben ser accesibles los tooltips y las ventanas emergentes en sitios web?
Las ventanas emergentes que aparecen al pasar el ratón o al recibir el foco del teclado — tooltips, submenús, burbujas de información — deben cumplir tres condiciones: el visitante puede cerrarlas sin mover el ratón, generalmente con la tecla Escape. Puede mover el ratón hacia la ventana emergente sin que desaparezca. Y permanecen abiertas hasta que él las cierre o navegue más lejos.
Tres reglas para cada ventana emergente
Quien trabaja con una ampliación fuerte de pantalla solo ve una pequeña sección del sitio. Si se abre un tooltip al pasar el ratón, puede tapar rápidamente exactamente el texto que se estaba leyendo — y sin posibilidad de cerrarlo, quedará atrapado. Por eso la primera regla: debe poder desactivarse, típicamente con la tecla Escape. La segunda regla afecta al mismo grupo: para leer una ventana emergente ampliada, hay que poder mover el ratón hacia ella — si desaparece al abandonar el activador, su contenido es inaccesible. La tercera regla exige persistencia: una ventana emergente que desaparece por sí sola después de unos segundos es inútil para lectores lentos. Los casos problemáticos clásicos son submenús personalizados e iconos de información en formularios.
Así verificamos las ventanas emergentes
Las ventanas emergentes se muestran solo en la interacción: hay que pasar el ratón sobre el activador, presionar Escape, observar el tiempo de permanencia. Nuestro núcleo de medición realiza interacciones pasivas dirigidas en su sitio — por ejemplo, navega con el foco del teclado a través de la página y observa el comportamiento. Pero esto no proporciona una sentencia completa sobre las tres condiciones para cada ventana emergente individual; según nuestro principio fundamental, sin evidencia real nada se da por aprobado. El informe señala esto claramente: cada criterio WCAG aparece individualmente como aprobado, incumplido, a revisar manualmente o no automatizable. Un sello surge en nosotros solo a partir de declaraciones que la medición realmente respalda.
Beispiele
Tooltip nur beim Überfahren
<span class="hilfe" title="Die Kundennummer steht auf der Rechnung oben rechts.">?</span><button type="button" aria-describedby="hilfe-knr" aria-expanded="false">Wo finde ich das?</button>
<p id="hilfe-knr" hidden>Die Kundennummer steht auf der Rechnung oben rechts.</p>Eine Einblendung muss per Tastatur erreichbar sein, mit Escape schließen und stehen bleiben, solange der Zeiger darauf ruht.
- Pase el ratón sobre los iconos de información y menús de su sitio y presione Escape — la ventana emergente debe cerrarse.
- Mueva el ratón del activador hacia la ventana emergente misma — debe permanecer abierta.
- Elimine los temporizadores que cierren automáticamente las ventanas emergentes después de unos pocos segundos.
- Prefiera el clic al pasar el ratón como activador — lo que se abre y cierra con clic cumple las reglas casi automáticamente.
- Pida a su agencia que use componentes probados y accesibles en submenús y tooltips en lugar de desarrollos propios.