Fallo Común F54 de WCAG 2.1: Usar solo eventos específicos de puntero

La accesibilidad digital es clave para garantizar que todas las personas, independientemente de sus capacidades, puedan interactuar con los sitios web y aplicaciones. Uno de los errores más comunes es depender únicamente de eventos específicos de dispositivos señaladores, como clics de ratón o gestos táctiles, para activar funciones.

El fallo F54 ocurre cuando una función solo puede activarse mediante un dispositivo de puntero (mouse, pantalla táctil, trackpad), sin ofrecer una alternativa accesible como el teclado. Esto afecta principalmente a:

Personas con discapacidad visual, que dependen de tecnologías como lectores de pantalla y teclados.

Usuarios con movilidad reducida, que utilizan teclados alternativos o emuladores de teclado.

Este fallo incumple la WCAG 2.1, específicamente el Criterio de Conformidad 2.1.1: Teclado → Toda funcionalidad debe ser accesible mediante el teclado sin requerir un tiempo específico de pulsación.

Acerca de este fallo

Algunos desarrolladores diseñan interacciones basadas únicamente en eventos como onclick, onmousedown, o ontouchstart, sin proporcionar una alternativa accesible. Esto significa que los usuarios que navegan exclusivamente con el teclado no pueden acceder a la funcionalidad.

Problemas causados por este fallo:

• No permite que los usuarios que dependen del teclado interactúen con la función.
• Limita el acceso a usuarios de tecnologías de asistencia como lectores de pantalla.
• Puede provocar frustración y abandono del sitio web por falta de accesibilidad.

Ejemplos comunes donde ocurre este fallo:

• Un botón de navegación que solo responde a clics del ratón (onclick).
• Un control de volumen que solo funciona con gestos táctiles (ontouchstart).
• Un menú desplegable activado únicamente con eventos de ratón (onmouseover).

Ejemplos

Ejemplo incorrecto 1: Uso exclusivo de eventos de ratón

Este código permite avanzar a la siguiente página solo con un clic del mouse.

🔴 Problema:

• Los usuarios de teclado no pueden activar la función.
• No hay alternativa accesible para quienes no usan mouse.

Solución correcta: Incluir eventos de teclado

Para hacer accesible la función, debemos agregar onkeydown para permitir el acceso desde el teclado.

✅ ¿Qué mejora?: 

• Se puede activar la acción con la tecla Enter.
• tabindex="0" permite que el elemento sea enfocable mediante el teclado.
• Se mantiene la funcionalidad para usuarios de mouse y teclado.

Ejemplo incorrecto 1: Un botón táctil sin alternativa

Este código usa ontouchstart, lo que significa que solo los usuarios de pantallas táctiles pueden interactuar.

🔴 Problema:

• No hay alternativa para quienes usan teclado.
• Un usuario con teclado no puede activar la función.

Solución correcta: Usar eventos combinados

Se deben combinar eventos para asegurar accesibilidad:

✅ ¿Qué mejora?: 

• Compatible con pantallas táctiles, teclado y ratón.
• Usa onkeydown para permitir activación con la tecla Enter.

Errores comunes y cómo evitarlos

Errores frecuentes:

• Usar solo onclick, onmousedown o ontouchstart sin una alternativa de teclado.
• No agregar tabindex="0" en elementos que deben ser navegables con el teclado.
• Suponer que todos los usuarios interactúan con el contenido mediante gestos táctiles o mouse.

Cómo evitar estos errores:

• Asegurar que todas las funciones sean accesibles con teclado.
• Usar onkeydown en combinación con onclick o ontouchstart.
• Probar el sitio solo con teclado para detectar funciones inaccesibles.

Preguntas frecuentes sobre el fallo común F54

¿Puedo usar eventos de mouse en mi sitio web?

Sí, pero siempre debes asegurarte de proporcionar una alternativa accesible para teclado.

¿Cómo pruebo si mi sitio es accesible para teclado?

Navega con la tecla Tab y usa Enter para activar elementos interactivos.

¿Es suficiente agregar tabindex="0"?

No, tabindex="0" permite enfocar elementos, pero debes asegurarte de que las acciones también se puedan activar con el teclado.

¿Por qué es importante que los eventos sean accesibles?

Porque muchos usuarios dependen exclusivamente del teclado o tecnologías de asistencia para navegar la web.

¿Cómo evito este fallo en JavaScript?

Usa eventos como onkeydown y verifica si la tecla presionada es Enter o Space.

¿Las WCAG prohíben los eventos de mouse o táctiles?

No, pero requieren que cualquier funcionalidad activada por punteros también pueda usarse con teclado.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F54: Fallo del Criterio de Conformidad 2.1.1 debido al uso únicamente de controladores de eventos específicos del dispositivo señalador (incluido el gesto) para una función
• Comprender el criterio de éxito 2.1.1: Teclado
• SCR20: Uso del teclado y otras funciones específicas del dispositivo
• Pruebas de accesibilidad con teclado

Pruebas y validación

Procedimiento:

1. Revisar el código y verificar si hay funciones activadas solo con onclick, onmousedown, ontouchstart.
2. Probar la funcionalidad solo con teclado, sin usar mouse ni pantalla táctil.
3. Comprobar que la función también pueda activarse con la tecla Enter o Espacio.

Resultados esperados:

• ✅ Si la funcionalidad se activa con teclado, cumple con WCAG 2.1.1.
• ❌ Si solo se activa con puntero y no hay alternativa, falla el criterio 2.1.1.

El uso exclusivo de eventos específicos de puntero excluye a muchos usuarios de la web. Para garantizar la accesibilidad, es fundamental proporcionar alternativas de teclado y asegurarse de que las funciones sean operables sin mouse ni gestos táctiles.

💡 Si necesitas ayuda para mejorar la accesibilidad de tu sitio web, contáctanos! 🚀