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 para moverse y la tecla Intro para seleccionar un elemento. En algunos casos también se usan las flechas de dirección y la barra espaciadora.

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;
}

Aviso: Algunas veces, se elimina esa línea de contorno mediante la regla :focus {outline: 0} por motivos estéticos. Esto se considera una mala práctica, porque desaparece toda referencia visual para navegar por teclado. En todo caso, si se elimina se debe ofrecer una alternativa visual.

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 resulta necesario cambiar la presentación visual, 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

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