Foco

Definición Técnica

El foco (focus) es el indicador visual y programático que muestra qué elemento de la interfaz de usuario está actualmente seleccionado y listo para recibir entrada del teclado o interacción. Es esencial para la navegación accesible, especialmente para usuarios que no pueden usar un mouse.

Cómo Funciona

Estados de Foco

1. Elemento enfocado: Recibe entrada del teclado
2. Indicador visual: Borde, outline o resaltado
3. Estado programático: Atributo :focus en CSS, focus() en JavaScript

Elementos Enfocables

Por defecto, estos elementos son enfocables:

• Enlaces: <a href>
• Botones: <button>
• Campos de formulario: <input>, <select>, <textarea>
• Elementos con tabindex: Cualquier elemento con tabindex="0" o mayor

Indicador Visual

CSS :focus

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

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

Errores Comunes

/* ❌ Incorrecto: Eliminar outline sin reemplazo */
button:focus {
  outline: none; /* Elimina indicador de foco */
}

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

Gestión de Foco

JavaScript

// ✅ Correcto: Mover foco a elemento importante
function abrirModal() {
  const modal = document.getElementById('modal');
  modal.style.display = 'block';
  const primerBoton = modal.querySelector('button');
  primerBoton.focus(); // Mover foco al modal
}

// ✅ Correcto: Restaurar foco al cerrar
function cerrarModal() {
  const modal = document.getElementById('modal');
  const trigger = document.getElementById('abrir-modal');
  modal.style.display = 'none';
  trigger.focus(); // Restaurar foco al elemento que abrió el modal
}

Errores Comunes

❌ Eliminar Foco

// ❌ Incorrecto: Eliminar foco sin razón
element.addEventListener('focus', (e) => {
  e.target.blur(); // No hacer esto
});

❌ Foco Perdido

// ❌ Incorrecto: No restaurar foco después de acción
function cerrarDialogo() {
  dialog.style.display = 'none';
  // Foco perdido, usuario no sabe dónde está
}

// ✅ Correcto: Restaurar foco
function cerrarDialogo() {
  const trigger = document.activeElement;
  dialog.style.display = 'none';
  trigger.focus(); // Restaurar foco
}

Criterios WCAG

2.4.7 Focus Visible (Nivel AA)

Cualquier interfaz de usuario enfocable debe tener un indicador de foco visible.

2.4.3 Focus Order (Nivel A)

El orden de foco debe seguir un orden lógico.

Referencias

• WCAG 2.4.7 Focus Visible
• MDN - :focus

Términos Relacionados

• Indicador de foco visible
• Orden de tabulación
• Navegación por teclado