Indicador de enfoque visible
Los usuarios que navegan mediante pestañas siempre saben dónde están. No hay contorno que desaparezca.
¿Qué significa "Indicador de enfoque visible"?
El indicador de enfoque es el marcador visible que muestra qué elemento se está seleccionando con el teclado. Por defecto, el navegador suele mostrar un fino contorno azul. Muchos temas eliminan este contorno ("queda feo"), lo que dificulta la navegación con teclado para quienes no usan el ratón.
Obligación y beneficio — WCAG 2.4.11.
WCAG 2.4.11 (Apariencia de Focus) Requiere un indicador de enfoque con una clara distinción visual: al menos 2 píxeles CSS de grosor, con una relación de contraste de 3:1 con respecto a su entorno. Sin un enfoque visible, la navegación con el teclado es prácticamente imposible (no se sabe adónde llevará pulsar Intro). También se requiere: :enfoque-visible Separa el clic del ratón (no se necesita contorno) del enfoque de la tecla Tab (se requiere contorno): una experiencia de usuario limpia.
Cómo lo resolveremos específicamente.
- Estilo de enfoque global: 3 px de color sólido de la marca + 3 px de desplazamiento, radio de borde de 6 px: muy visible, contraste AAA.
:enfoque-visibleen lugar de:enfocarLos clics del ratón no reciben un contorno, pero el foco de la tecla Tab sí.- Nunca global
esquema: ningunosin reemplazo. - A los componentes personalizados (carruseles, menús desplegables personalizados) se les asignan explícitamente sus propios estados de enfoque.
- Verificación: Prueba del teclado: cada elemento interactivo debe ser claramente identificable cuando está seleccionado.
Componentes básicos relacionados de nuestro conjunto de módulos
-
Formularios accesibles
WCAG 3.3.1Etiquetas claras, manejo programático de errores, validación: sin burbujas en el navegador, sin "por favor, rellene".
-
Contrastes AAA, probados por componente
WCAG 1.4.6≥ 7:1 para texto, ≥ 4,5:1 para fuente grande — probado por componente, no por muestra de página.
-
Saltar enlaces y puntos de referencia semánticos
WCAG 2.4.1El teclado salta directamente al contenido principal, sin tener que navegar por el menú de navegación ni el encabezado.
-
Lenguaje sencillo (con soporte de IA)
WCAG 3.1.5Contenido simplificado con solo pulsar un botón: para personas con dificultades de lectura, estudiantes de idiomas y personas con prisa.
¿Necesitas este módulo en concreto?
Consulta inicial de 15 minutos: aclararemos si es relevante para su sitio web.
Más información:
Descripción general de BFSG ·
Descripción general del rendimiento ·
Financiación de BAFA ·
Preguntas frecuentes
