Indicadores de Foco: Haciendo Visible la Navegación por Teclado

Introducción

Los indicadores de foco son señales visuales que muestran qué elemento interactivo de una página tiene actualmente el foco del teclado. Son esenciales para usuarios que navegan sitios web sin ratón—incluyendo personas que usan teclados, dispositivos de conmutación o lectores de pantalla. WCAG 2.4.7 requiere que los indicadores de foco sean visibles, haciéndolos un requisito fundamental de accesibilidad.

Sin indicadores de foco claros, los usuarios de teclado no pueden saber dónde están en la página, haciendo la navegación esencialmente imposible. Esto afecta a millones de usuarios que dependen de la navegación por teclado debido a discapacidades motoras, deficiencias visuales o preferencia personal.

¿Qué Son los Indicadores de Foco?

El Foco Predeterminado del Navegador

Los navegadores proporcionan indicadores de foco predeterminados para elementos interactivos:

/* Los estilos de foco predeterminados varían por navegador */
:focus {
  outline: auto;           /* Chrome: contorno azul */
  outline: dotted 1px;     /* Firefox: punteado */
  outline: solid 2px;      /* Safari: anillo azul */
}

Elementos Interactivos Que Reciben Foco

Tipo de Elemento	Ejemplos	Recibe Foco
Enlaces	<a href>	Sí
Botones	<button>, <input type="button">	Sí
Controles de Formulario	<input>, <select>, <textarea>	Sí
Controles Personalizados	Elementos con tabindex="0"	Sí
No Interactivos	<div>, <span>, <p>	No (por defecto)

Por Qué Importan los Indicadores de Foco

Quién Se Beneficia

1. Usuarios solo de teclado - Deben ver dónde están navegando
2. Usuarios con discapacidades motoras - Pueden usar dispositivos de conmutación o inputs alternativos
3. Usuarios con baja visión - Combinan teclado con magnificación de pantalla
4. Usuarios avanzados - Prefieren atajos de teclado por eficiencia
5. Situaciones temporales - Ratón roto, problemas con touchpad

El Problema de Navegación

Sin foco visible:

• Los usuarios no pueden saber qué enlace se activará al presionar Enter
• La navegación de formularios se convierte en adivinanzas
• Los skip links se vuelven invisibles
• Los usuarios pueden activar accidentalmente elementos incorrectos

Requisitos WCAG

Criterio	Nivel	Requisito
2.4.7 Foco Visible	AA	El indicador de foco debe ser visible
2.4.11 Foco No Oscurecido	AA	El foco no puede estar completamente oculto (WCAG 2.2)
2.4.12 Foco No Oscurecido (Mejorado)	AAA	El foco debe estar completamente visible (WCAG 2.2)

Problemas Comunes de Foco

1. Contornos de Foco Eliminados

/* MAL: Elimina el foco para todos los usuarios */
*:focus {
  outline: none;
}

/* MAL: También oculta el foco */
a:focus,
button:focus {
  outline: 0;
}

Esto se hace frecuentemente porque los diseñadores encuentran el contorno predeterminado “feo”, pero crea una barrera de accesibilidad significativa.

2. Indicadores de Foco con Bajo Contraste

/* MAL: Foco apenas visible */
button:focus {
  outline: 1px solid #ddd;
}

/* MAL: Foco se mezcla con el fondo */
.dark-section a:focus {
  outline: 2px solid #333;
}

3. Foco Oculto por Otros Elementos

/* MAL: Header sticky cubre elementos enfocados */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Sin scroll margin = foco oculto detrás del header */

4. Foco Solo en Hover de Ratón

/* MAL: Feedback visual solo para ratón */
button:hover {
  background: #007bff;
}

/* Sin estado :focus = usuarios de teclado excluidos */

La Solución :focus-visible

CSS moderno proporciona :focus-visible, que muestra el foco solo para navegación por teclado:

/* Eliminar anillo de foco para usuarios de ratón */
button:focus {
  outline: none;
}

/* Mostrar anillo de foco solo para usuarios de teclado */
button:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

Cómo Funciona :focus-visible

Interacción	:focus	:focus-visible
Click de ratón	✅ Se activa	❌ No se activa
Tecla Tab	✅ Se activa	✅ Se activa
Teclas de flecha	✅ Se activa	✅ Se activa
Toque táctil	✅ Se activa	❌ No se activa

Esto proporciona lo mejor de ambos mundos:

• Los usuarios de teclado ven indicadores de foco claros
• Los usuarios de ratón no ven contornos después de hacer click

Guías Rápidas de Diseño

Indicadores de Foco Efectivos

1. Alto contraste - Mínimo 3:1 contra colores adyacentes
2. Tamaño suficiente - Al menos contorno de 2px o cambio visual claro
3. Estilo consistente - Mismo tratamiento en todo el sitio
4. No oscurecido - Visible incluso con headers sticky

Ejemplos de Buenos Indicadores de Foco

/* Contorno sólido con offset */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Enfoque con box shadow */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}

/* Cambio de fondo */
:focus-visible {
  background-color: #fff3cd;
  outline: 2px solid #856404;
}

Probando Indicadores de Foco

Prueba Manual Rápida

1. Deja tu ratón a un lado
2. Presiona Tab repetidamente a través de la página
3. ¿Puedes ver dónde está el foco en todo momento?
4. ¿Puedes saber qué elemento se activará al presionar Enter?
5. ¿El foco alguna vez queda oculto detrás de elementos sticky?

Puntos Comunes de Prueba

• Enlaces de navegación
• Botones y CTAs
• Campos de formulario
• Skip links
• Botones de cierre de modales
• Disparadores de dropdowns

Herramientas Que Ayudan

• DevTools del Navegador - Forzar estado de foco en elementos
• axe DevTools - Detecta problemas de indicadores de foco
• WAVE - Resalta problemas de orden de foco
• Solo teclado - La mejor prueba es navegación real por teclado

Resumen de Mejores Prácticas

Hacer	No Hacer
Mantener o mejorar estilos de foco predeterminados	Eliminar outline con outline: none
Usar :focus-visible para UX limpia	Aplicar :focus y :hover idénticamente
Asegurar ratio de contraste 3:1	Usar indicadores de foco con bajo contraste
Agregar scroll margin para headers sticky	Dejar que el foco se oculte detrás de elementos fijos
Probar con navegación por teclado	Asumir que probar con ratón es suficiente

Artículos Relacionados

• Guía de Implementación de Indicadores de Foco - Técnicas detalladas
• Guía de Navegación por Teclado - Accesibilidad completa de teclado
• Hub de Cumplimiento WCAG - Todos los evaluadores de accesibilidad

---

Referencias

1. W3C - WCAG 2.2 SC 2.4.7 Focus Visible
2. W3C - WCAG 2.2 SC 2.4.11 Focus Not Obscured
3. WebAIM - Keyboard Accessibility
4. MDN - :focus-visible pseudo-class