Saltar al contenido principal

Navegación por teclado

Un sitio web accesible debe ser navegable utilizando únicamente el teclado. Los usuarios de lectores de pantalla y los usuarios con movilidad reducida navegan mediante el teclado.

Nota: Para navegar con el teclado se usan principalmente la tecla Tab o las flechas de dirección para moverse, y la tecla Intro o la barra espaciadora para seleccionar un elemento.

El foco del teclado

El foco del teclado se refiere al elemento que está seleccionado en ese momento y sobre el cual se puede ejercer una acción.

Visibilidad del foco

Cuando un elemento de interacción —enlace, botón, control de formulario, etc.— recibe el foco, debe aparecer un indicador visual.

Los navegadores incluyen una línea de contorno por defecto. Podemos cambiar su estilo modificando los valores de la propiedad CSS outline.

Ejemplo
CSS
a:focus {
  outline: 2px dotted grey;
}

Debido a que los navegadores manejan de forma distinta la propiedad outline, se puede sustituir por box-shadow para ofrecer una experiencia más consistente.

Ejemplo
CSS
a:focus {
  outline: 0;
  box-shadow: 0 0 0 3px grey;
}

En el caso de los enlaces, podemos reforzar visualmente el enfoque añadiendo un color de fondo.

Ejemplo
CSS
a:focus {
  outline: 3px solid #f9bf3b;
  background-color: #f9bf3b;
}

Aviso: Si se elimina la línea de contorno usando outline: 0, hay que ofrecer siempre una alternativa.

Orden del foco

Los elementos que pueden recibir el foco deben estar ordenados de forma lógica, siguiendo el flujo visual de la página, generalmente de izquierda a derecha, y de arriba a abajo.

Esto se consigue organizando los contenidos mediante HTML en el orden correcto. Si hay que cambiar la presentación visual conviene hacerlo mediante CSS.

Evitar las trampas para el foco

Si es posible mover el foco a un componente mediante el teclado, entonces también se debe poder quitar el foco solo con el teclado.

Por ejemplo, una ventana del tipo modal, debe ofrecer un botón para cerrarla. Si solo se puede cerrar pulsando fuera de la ventana mediante el ratón, entonces el foco se encuentra “atrapado”.

Evitar cambios de contexto

Situar el foco sobre un elemento de interfaz, no debería producir ningún cambio de contexto, ya que eso podría desorientar a los usuarios que no ven la página.

Ejemplos de cambio de contexto:

  • El foco cambia automáticamente a otro elemento
  • Se abre una nueva ventana o pestaña
  • Se envía un formulario automáticamente
  • Se abre una aplicación de correo o un lector de PDF

Nota: Los cambios de contexto no deben producirse automáticamente, sino cuando el usuario los solicita pulsando un enlace o botón.