Indicador de foco visible

Definición Técnica

Un indicador de foco visible es un indicador visual claro y distinguible que muestra qué elemento de la interfaz tiene actualmente el foco del teclado. Es esencial para usuarios que navegan con teclado, ya que les permite saber exactamente dónde están en la página y qué elemento pueden activar.

Requisitos WCAG 2.4.7

Focus Visible (Nivel AA): Cualquier interfaz de usuario enfocable debe tener un indicador de foco visible cuando recibe foco.

Características del Indicador

1. Visible: Debe ser claramente visible
2. Distinguible: Debe destacar del fondo
3. Contraste suficiente: Debe cumplir ratios de contraste
4. Tamaño adecuado: Debe ser fácil de ver

Implementación

Outline por Defecto

/* Navegadores proporcionan outline por defecto */
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

Personalización

/* ✅ Correcto: Indicador personalizado visible */
button:focus {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3);
}

/* ✅ Correcto: Combinación de técnicas */
a:focus {
  outline: 2px dashed #0066cc;
  background-color: #e6f2ff;
  text-decoration: underline;
}

Errores Comunes

❌ Eliminar Sin Reemplazo

/* ❌ Incorrecto: Eliminar outline sin alternativa */
button:focus {
  outline: none; /* Usuario no sabe dónde está el foco */
}

/* ✅ Correcto: Reemplazar con alternativa visible */
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5);
  border: 2px solid #0066cc;
}

❌ Indicador Muy Sutil

/* ❌ Incorrecto: Indicador casi invisible */
button:focus {
  outline: 1px solid #cccccc; /* Muy sutil */
}

/* ✅ Correcto: Indicador claro y visible */
button:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

Ejemplos por Tipo de Elemento

Enlaces

a:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  background-color: #f0f0f0;
}

Botones

button:focus {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3);
}

Campos de Formulario

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  border-color: #0066cc;
}

Testing

Verificación Visual

1. Navegar con Tab: Presionar Tab para mover foco
2. Verificar visibilidad: ¿Se ve claramente el indicador?
3. Verificar contraste: ¿Tiene suficiente contraste?
4. Probar en diferentes navegadores: Comportamiento puede variar

Referencias

• WCAG 2.4.7 Focus Visible
• WebAIM - Keyboard Accessibility

Términos Relacionados

• Foco
• Navegación por teclado
• Orden de tabulación