Tutorial HTML: Navegación por teclado

La navegación por teclado es una parte esencial de la accesibilidad web. Permite que los usuarios que no pueden o no quieren usar un ratón, puedan interactuar con una página web usando solo el teclado. Esto incluye a personas con discapacidades físicas, pero también a personas que simplemente prefieren usar el teclado por eficiencia o comodidad.

Elementos enfocables

La mayoría de los elementos que el usuario puede interactuar en una página web son enfocables por defecto. Esto incluye:

• Enlaces (<a href="...">)
• Botones (<button>)
• Campos de entrada (<input>, <textarea>, <select>)
• Elementos con el atributo contenteditable establecido en true

Por ejemplo:

<a href="https://www.ejemplo.com">Un enlace</a>
<button>Un botón</button>
<input type="text" placeholder="Un campo de entrada">
<textarea>Un campo de texto</textarea>
<select>
  <option>Opción 1</option>
  <option>Opción 2</option>
</select>
<div contenteditable="true">Un elemento editable</div>

Todos estos elementos son enfocables mediante la tecla Tab del teclado y se puede interactuar con ellos mediante otras teclas como Enter o Space.

Atributo tabindex

El atributo tabindex puede usarse para modificar el orden de tabulación por defecto o para hacer que elementos que normalmente no son enfocables, se puedan enfocar.

• Un tabindex="0" hará que el elemento sea enfocable y participe en la navegación secuencial del teclado.
• Un tabindex positivo (por ejemplo, tabindex="1") hará que el elemento sea enfocable y que se coloque en la posición especificada en el orden de tabulación. Sin embargo, es recomendable no usar tabindex positivo ya que puede hacer que la navegación sea confusa para el usuario.
• Un tabindex="-1" hará que el elemento sea enfocable pero no participe en la navegación secuencial del teclado. Solo se puede enfocar programáticamente con JavaScript.

Por ejemplo:

<div tabindex="0">Este div es enfocable</div>

Navegación por teclado con JavaScript

También es posible gestionar la navegación por teclado de forma programática utilizando JavaScript. Por ejemplo, es posible enfocar un elemento utilizando el método focus():

document.querySelector('button').focus();

También se puede escuchar el evento keydown para gestionar el comportamiento al presionar una tecla:

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowDown') {
    // Gestiona la tecla de flecha hacia abajo
  }
});

Consideraciones finales

Es importante tener en cuenta que la navegación por teclado es solo una parte de la accesibilidad web. También hay que considerar otras cosas como los lectores de pantalla, los colores y contrastes adecuados, entre otros.

Además, una buena navegación por teclado debe ser intuitiva y seguir un flujo lógico. Los usuarios de teclado deben poder acceder a todos los elementos interactivos de la página y saber en todo momento en qué parte de la página están. Esto a menudo se indica visualmente con un estilo de foco.

Finalmente, aunque HTML proporciona muchos de los comportamientos de teclado por defecto, a veces puede ser necesario personalizar este comportamiento con JavaScript, especialmente para los widgets complejos. En estos casos, es aconsejable seguir las prácticas recomendadas como las definidas en las pautas de accesibilidad del WAI-ARIA.