La accesibilidad web es esencial para garantizar que todos los usuarios, incluidos aquellos con discapacidades motoras o visuales, puedan interactuar con las interfaces digitales sin obstáculos. Un problema recurrente ocurre cuando los estilos de los elementos eliminan o hacen invisible el indicador de enfoque visual, lo que afecta la navegabilidad para usuarios que dependen del teclado.
Este fallo, identificado como F78 en WCAG 2.1, compromete el cumplimiento de los criterios de conformidad 2.4.7 (Enfoque Visible) y 1.4.11 (Contraste No Textual).
Un estudio de la WebAIM Million revela que más del 50% de los sitios analizados presentan problemas de enfoque accesible, lo que impide que los usuarios de teclado naveguen de manera eficiente.
Acerca de este fallo
El fallo F78 ocurre cuando los estilos de los elementos en la interfaz afectan negativamente el indicador de enfoque visual. Esto puede suceder al deshabilitar el outline por defecto, usar bordes de colores que ocultan el foco o aplicar efectos visuales que hacen imperceptible la selección del elemento activo.
Escenarios comunes del fallo:
- Uso de
outline: none;en los estilos CSS sin proveer una alternativa accesible. - Bordes gruesos del mismo color que el indicador de enfoque, ocultándolo.
- Elementos con bordes o sombras que dificultan la distinción del enfoque.
Ejemplos
Ejemplo incorrecto 1: Eliminación del indicador de enfoque con CSS
Este código elimina el contorno de enfoque predeterminado del navegador, lo que impide que los usuarios de teclado sepan qué elemento está activo.
🔴 Problema: Los usuarios que navegan con teclado no tienen una referencia visual clara del elemento enfocado.
Solución correcta: Mantener un indicador de enfoque accesible
En lugar de eliminar el outline, se debe proporcionar un indicador visual claro, como un borde contrastante o un cambio de fondo.
✅ ¿Qué mejora?:
- Se mantiene un contorno visible con alto contraste.
- Mejora la experiencia de navegación para usuarios de teclado.
Ejemplo incorrecto 1: Contorno similar al borde del elemento
Cuando el contorno del elemento es del mismo color que su borde, el indicador de enfoque se vuelve imperceptible.
🔴 Problema: El foco es técnicamente visible, pero se pierde en el diseño, afectando la usabilidad.
Solución correcta: Asegurar contraste adecuado
Asegurar que el foco tenga un color contrastante respecto al fondo y bordes del elemento.
✅ ¿Qué mejora?:
- Se diferencia el foco del borde mediante un color contrastante.
- Permite a los usuarios identificar con claridad el enlace activo.
Ejemplo correcto: Solución ideal
El siguiente código optimiza la visibilidad del foco mediante un contorno altamente contrastante y efectos visuales adicionales, como un cambio de fondo al enfocar.
✅ ¿Qué mejora?:
- Mantiene un foco visible con alto contraste.
- Añade un cambio de color de fondo para mayor claridad.
- Mejora la experiencia de navegación para todos los usuarios.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Eliminar el
outlinesin ofrecer una alternativa visible. - Usar colores de bajo contraste que ocultan el indicador de foco.
- Aplicar bordes gruesos del mismo color que el
outline, reduciendo su visibilidad.
Cómo evitar estos errores:
- Mantener siempre un indicador de foco visible y contrastante.
- Usar
outline,borderobox-shadowcon colores llamativos y distintivos. - Asegurar que el foco sea perceptible en todos los estados (
hover,active,focus).
Preguntas frecuentes sobre el fallo F78
¿Por qué es importante el indicador de enfoque?
Es fundamental para usuarios que dependen del teclado, como personas con discapacidades motoras o ceguera. Sin este indicador, no pueden navegar correctamente.
¿Es obligatorio usar outline en los elementos?
No, pero es altamente recomendado. Si se elimina, se debe reemplazar por un indicador de foco visible y accesible.
¿Cómo pruebo si los elementos tienen un foco accesible?
Usa la tecla Tab para moverte por los elementos interactivos. Si no ves un cambio visual claro, hay un problema de accesibilidad.
¿Puedo personalizar el indicador de foco sin afectar la accesibilidad?
Sí. Se pueden usar bordes, cambios de color o sombras (box-shadow) para hacerlo más visible y estéticamente armonioso.
¿Cómo verifico si mi sitio cumple con este criterio?
Usa herramientas como Lighthouse, el Validador de Accesibilidad de WAVE o axe DevTools para evaluar la visibilidad del foco.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F78: Incumplimiento del Criterio de Conformidad 2.4.7 debido a diseñar los contornos y bordes de los elementos de una manera que elimina o vuelve no visible el indicador de enfoque visual
- Comprender el criterio de éxito 1.4.11: Contraste no textual
- Comprender el criterio de éxito 2.4.7: Enfoque visible
Pruebas y validación
Procedimiento
- Usa el teclado (
Tab) para navegar entre elementos interactivos. - Observa si cada elemento muestra un indicador claro de foco.
- Si el foco no es visible o difícil de distinguir, hay un problema de accesibilidad.
Resultados esperados
- ✅ Si todos los elementos tienen un foco visual claro, el sitio cumple con WCAG.
- ❌ Si el foco es invisible o confuso, el contenido falla los criterios 2.4.7 y 1.4.11 y debe corregirse.
Garantizar un enfoque visible y accesible es clave para la inclusión digital. Eliminar o dificultar la percepción del foco afecta a millones de usuarios con discapacidad. Personaliza el indicador de enfoque de manera accesible y asegúrate de cumplir con WCAG 2.1.
🚀 ¿Tu sitio web es accesible? Contáctanos para una auditoría y optimización en accesibilidad web. 💡