Navegación por teclado

Un sitio web accesible debe ser navegable utilizando únicamente el teclado.

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 Shift + Tab para moverse por todos los elementos que pueden ser activados.
  • Flechas de dirección para moverse dentro un elemento, como por ejemplo un menú desplegable.
  • Intro o Espacio para seleccionar o activar un elemento.

Todos los elementos de interacción —enlaces, botones, controles de formulario, etc.— deben ser operables mediante el teclado para resultar accesibles.

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.

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

Los elementos que pueden recibir el foco deben estar ordenados de forma lógica siguiendo el flujo visual de la página, por ejemplo, de izquierda a derecha y de arriba a abajo en los idiomas que se escriben de izquierda a derecha.

Esto se consigue organizando los contenidos mediante HTML en el orden correcto. 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, 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.