Teclado

Uso del teclado

Usuarios de lectores de pantalla, personas con movilidad reducida y algunos usuarios avanzados navegan por la web utilizando únicamente 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 desplazarse dentro de un elemento, como un menú desplegable.
• Intro o Espacio para seleccionar o activar un elemento.

Todos los elementos interactivos (enlaces, botones, formularios, etc.) deben ser operables mediante el teclado.

El foco del teclado

El foco del teclado indica el elemento activo en ese momento, sobre el cual se puede realizar una acción.

Los navegadores muestran por defecto un contorno para indicar el foco. Su estilo puede modificarse con la propiedad CSS outline. Puedes combinarlo con box-shadow para añadir un doble borde.

button:focus-visible {
  box-shadow: 0 0 0 4px black;
  outline: 2px solid white;
}

La pseudoclase :focus-visible permite aplicar estilos solo cuando el foco se activa mediante el teclado.

Cambia el enfoque

El atributo tabindex permite personalizar el orden y el comportamiento del foco en los elementos HTML.

Valores de tabindex:

• tabindex="-1" (o cualquier otro valor negativo): 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.
• tabindex="1" (o cualquier otro valor positivo): Modifica el orden natural del foco. Se desaconseja su uso, ya que puede generar confusión.

Saltar al contenido principal

El enlace “saltar al contenido principal” permite evitar secciones repetidas, como el menú de navegación, y acceder directamente al contenido principal.

Es especialmente útil para quienes navegan con teclado o lectores de pantalla, ya que ahorra tiempo y mejora la experiencia.

<a href="#main" class="skip-link">Saltar al contenido principal</a>
...
<main id="main">...</main>

Puedes usar CSS para que este enlace solo sea visible al recibir el foco. Así no afecta al diseño visual, pero sigue siendo accesible mediante el teclado.

.skip-link:not(:focus) {
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
}

Recomendaciones

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

• El orden de los elementos interactivos sigue una secuencia lógica que coincide con el diseño visual de la página.
• Si se puede enfocar un componente con el teclado, también debe poder retirarse el foco del mismo por el mismo medio.
• Al situar el foco sobre un elemento, no debe producirse ningún cambio de contexto (por ejemplo, abrir una nueva ventana o enviar un formulario).