Navegación por teclado

Uso del 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 Mayús + Tab para moverse por todos los elementos interactivos.
• 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.

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

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

El atributo tabindex

El atributo tabindex permite cambiar el comportamiento del enfoque en cualquier elemento de HTML.

Valores de tabindex:

• tabindex="-1": El elemento desaparece del orden secuencial del teclado.
• tabindex="0": Un elemento que normalmente no se puede enfocar pasa a ser accesible a través del teclado.
• Valor positivo: Cambia el orden de prioridad en la tabulación.

Recomendaciones

Al navegar por un sitio web utilizando el teclado asegúrate de que:

• Los elementos interactivos están ordenados de forma lógica siguiendo el flujo visual de la página.
• Si es posible mover el foco a un componente mediante el teclado, entonces también se debe poder quitar el foco sólo con el teclado.
• Situar el foco sobre un elemento de interfaz no produce ningún cambio de contexto, como abrir una nueva ventana o enviar un formulario.