Navegación por teclado

Uso del teclado para navegar

Los usuarios de lectores de pantalla, las personas con movilidad reducida y algunos usuarios avanzados navegan por la web mediante el teclado.

Para navegar con el teclado se usan principalmente las siguientes teclas:

• Tab y Mayús + Tab para moverse por todos los elementos que pueden ser activados.
• Las flechas de dirección para moverse dentro un elemento, como por ejemplo un menú desplegable.
• Intro o Espacio para seleccionar o activar un elemento.

Nota: Todos los elementos de interacción (enlaces, botones, controles de formulario, etc.) deben ser operables mediante el teclado.

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.

Los navegadores incluyen una línea de contorno por defecto para indicar dónde está el foco. Podemos cambiar su estilo modificando los valores de la propiedad CSS outline.

a:focus-visible {
  outline: 2px solid;
}

La pseudo clase :focus-visible sirve para dar estilo a los enlaces solo en caso de navegación por teclado.

Sigue un orden lógico

Los elementos que pueden recibir el foco deben estar ordenados de forma lógica siguiendo el flujo visual de la página.

Esto se consigue colocando los contenidos en el orden adecuado mediante HTML. Si hay que cambiar la presentación visual podemos hacerlo mediante CSS.

Evita 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”.

Evita los cambios de contexto

Situar el foco sobre un elemento de interfaz no debería producir ningún cambio de contexto, como abrir una nueva ventana o enviar un formulario automáticamente, ya que eso podría desorientar a los usuarios.

Comprobación

Navega por el sitio web utilizando solamente el teclado y comprueba que:

• La tabulación sigue un orden lógico.
• Todos los elementos de interacción son operables.
• El foco no queda bloqueado en ningún elemento.
• No se produce ningún cambio de contexto cuando un elemento recibe el foco.