El foco es un elemento esencial en la accesibilidad web. Permite que las personas que navegan con el teclado o con tecnologías de asistencia puedan interactuar con los componentes de una página. Sin embargo, algunos desarrolladores implementan scripts para eliminar el foco cuando un elemento lo recibe, ya sea por razones estéticas o por desconocimiento.
Este fallo F55 afecta a varios criterios de las WCAG 2.1, entre ellos:
- 2.1.1: Teclado → La eliminación del foco impide la navegación mediante teclado.
- 2.4.7: Enfoque visible → Al eliminar el foco, los usuarios no tienen forma de saber qué elemento está activo.
- 3.2.1: Al recibir el foco → Un cambio inesperado en el foco puede desorientar a los usuarios.
Impacto en la accesibilidad
- Los usuarios de teclado pueden perder el acceso a botones, enlaces o formularios.
- Las personas con discapacidades visuales no reciben retroalimentación sobre qué elemento está seleccionado.
- Puede generar confusión al no permitir interacciones lógicas dentro del flujo del contenido.
Acerca de este fallo
Cuando un usuario navega por un sitio web con el teclado (usando la tecla Tab), cada elemento interactivo debería recibir foco y permanecer en él hasta que el usuario lo desplace manualmente. Sin embargo, algunos desarrolladores incluyen scripts que eliminan automáticamente el foco cuando un elemento lo recibe, lo que provoca:
- Imposibilidad de interactuar con el elemento.
- Pérdida de la secuencia de navegación.
- Falta de indicación visual de qué elemento está activo.
Esto se suele hacer con código como onFocus="this.blur();", lo que provoca que los elementos interactivos no puedan ser seleccionados mediante teclado.
Escenarios comunes donde ocurre este fallo:
- Un botón que pierde el foco automáticamente cuando recibe interacción.
- Un enlace que no puede ser activado porque pierde el foco en cuanto se selecciona.
- Un campo de formulario que no permite escribir porque el cursor se desvanece al entrar en él.
Ejemplos
Ejemplo incorrecto 1: Botón que pierde el foco al seleccionarlo
Este código impide que los usuarios de teclado interactúen con el botón, ya que elimina el foco cuando se intenta seleccionarlo.
🔴 Problema:
- Los usuarios de teclado no pueden activar el botón porque desaparece el foco.
- No se puede utilizar con tecnologías de asistencia.
Solución correcta:
Se debe evitar el uso de onFocus="this.blur();" y permitir que el botón mantenga el foco de forma natural.
Ejemplo incorrecto 2: Enlace con imagen que pierde el foco al seleccionarlo
Este código hace que un enlace con una imagen no pueda ser activado con el teclado.
🔴 Problema:
- El usuario de teclado no puede acceder al enlace.
- No se puede interactuar con el contenido de la imagen.
Solución correcta:
Eliminar la instrucción onFocus="this.blur();" para que el enlace sea accesible.
Ejemplo incorrecto 3: Enlace de texto que no permite ser seleccionado
Este código impide que el enlace sea navegable con el teclado.
🔴 Problema:
- Los usuarios de teclado no pueden usar el enlace.
- Puede generar confusión en la navegación.
Solución correcta:
Evitar la eliminación del foco y permitir que el enlace sea navegable.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar
onFocus="this.blur();"para eliminar el foco por estética. - Aplicar
onFocus="this.blur();"en elementos de navegación como enlaces o botones. - No verificar la accesibilidad de los elementos interactivos en el teclado.
Cómo evitar estos errores:
- Permitir que los elementos retengan el foco sin eliminarlo manualmente.
- Asegurar que todos los elementos interactivos sean accesibles con teclado.
- Probar la navegación con teclado y verificar que todos los elementos pueden ser activados.
Preguntas frecuentes sobre el fallo común F55
¿Por qué es un problema eliminar el foco de los elementos interactivos?
Porque impide que los usuarios de teclado y tecnologías de asistencia puedan interactuar con ellos.
¿Es recomendable ocultar el foco por razones estéticas?
No. Se puede mejorar el diseño con CSS, pero nunca eliminando el foco funcionalmente.
¿Cómo puedo mejorar la accesibilidad sin quitar el foco?
Utilizando estilos CSS como outline: none; junto con otros indicadores visuales accesibles.
¿Cómo pruebo si mi sitio tiene este problema?
Navega por la página solo con el teclado y verifica si puedes interactuar con todos los elementos.
¿Cómo afectan estos fallos a los usuarios de lectores de pantalla?
El lector de pantalla no podrá detectar el foco, lo que impide la navegación efectiva.
¿Qué alternativas existen para mejorar la usabilidad sin afectar la accesibilidad?
Se pueden utilizar estilos personalizados en lugar de eliminar el foco.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F55: Incumplimiento de los Criterios de Conformidad 2.1.1, 2.4.7 y 3.2.1 debido al uso de un script para eliminar el foco cuando se recibe el foco
- Comprender el criterio de éxito 2.1.1: Teclado
- Comprender el criterio de éxito 2.4.7: Enfoque visible
- Comprender el criterio de éxito 3.2.1: En foco
Pruebas y validación
Procedimiento:
- Usa la tecla Tab para navegar por todos los elementos interactivos.
- Verifica que los elementos mantengan el foco cuando se seleccionan.
- Asegura que no se está utilizando
onFocus="this.blur();"en ningún elemento.
Resultados esperados:
- ✅ Si los elementos mantienen el foco y pueden activarse, la página cumple con WCAG 2.1.
- ❌ Si los elementos pierden el foco automáticamente, la página falla en WCAG 2.1.
Eliminar el foco de los elementos interactivos afecta negativamente la accesibilidad del sitio web. Para garantizar una experiencia inclusiva:
- Evita usar
onFocus="this.blur();"en elementos interactivos. - Prueba la navegación con teclado y asegúrate de que todos los elementos sean accesibles.
- Utiliza estilos CSS accesibles en lugar de eliminar el foco funcionalmente.
💡 Si necesitas ayuda para mejorar la accesibilidad de tu sitio web, contáctanos.
🔹 ¿Te ha sido útil este artículo? ¡Compártelo para ayudar a otros a crear sitios más accesibles! 🚀