English version

Existen personas que tienen discapacidades motoras y para las que emplear el ratón es muy difícil. Puede deberse a que tengan temblores en las manos, no puedan usarlas o que carezcan de ellas. En esta misma línea, las personas con discapacidad visual también suelen ser usuarias de la navegación por teclado.

Por todos estos motivos, adaptar nuestras webs a la navegación por teclado es de gran importancia.

¿Cómo navegamos con el teclado?

Puedes desplazarte por una página a través de los elementos interactivos utilizando la tecla Tab. Son interactivos: los botones (button), los enlaces (link), los menús (nav) y los inputs de los formularios (input, select, option, textarea). En este sentido, es relevante usar esta clase de etiquetas en lugar de otras que no reciben el foco, como los div, para así lograr que se pueda navegar por ellas.

Otras combinaciones de teclas útiles son:

• Ir hacia atrás: Shift + Tab.
• Activar un link o un botón: Enter.
• Cerrar un modal: Esc.
• Moverse entre radio inputs o elementos del select: Flechas.
• Navegar por el menú: Flechas arriba y abajo.
• Y muchos más.

Además, debemos tener en cuenta:

Tab order
El tab order hace referencia al orden en el que aparecen seleccionados los elementos al pulsar la tecla de tabulación. Por defecto, este viene determinado por cómo esté estructurado el DOM. Por ello, la configuración del HTML es fundamental, ya que determinará cómo se puede navegar por la página. Asimismo, para evitar posibles confusiones, debemos evitar modificar su orden con CSS.

Por otro lado, si deseas que aparezca algún elemento en el tab order que por su naturaleza no saldría porque no es interactivo, o si deseas que salga en otro orden, puedes utilizar tabindex.

• tabindex="0": Si añades esto a una etiqueta, esta se insertará en el orden de tabulación, no importará si es un una imagen, un párrafo… Este elemento será introducido según la posición natural en la que se encuentre.

• tabindex="-1": Con esto eliminarás un elemento de la tabulación.

• tabindex="1": Todo tabindex mayor que cero lo colocará antes que todo lo demás. Esto se considera un antipatrón, ya que es mejor estructurar bien tu código que forzarlo.

El tab order no es solamente relevante para los que naveguen por el teclado, sino también para los que utilizan lectores de pantalla. Estos últimos también navegan usando el orden del DOM.

Focus
Cuando navegamos con el teclado, necesitamos que haya un indicador visual que nos muestre en qué posición nos encontramos. Por defecto, estas señales las proporcionan los navegadores con un borde de color, generalmente azul. Si deseamos cambiar su estilo, podemos editarlo en el CSS mediante la propiedad “outline”. Aunque es posible eliminar este borde, hacerlo se desaconseja, ya que estaríamos empeorando la accesibilidad de la web.

Saltar menús
Tanto las personas que usan lectores de pantalla como los que navegan con el teclado, se suelen encontrar al principio de las páginas un menú con muchos links para acceder a todo. Esto puede ser molesto, ya que tienen que pasar por todos los enlaces antes de poder acceder al contenido.

Para atajar esta situación podemos colocar un enlace que “salte al contenido”. Este debe estar al principio de la página, solamente ser visible al pulsar en el tabulador, y debe redirigir al contenido principal. Este link será leído al principio por los lectores de pantalla y aparecerá al navegar por el teclado y permitirá a la audiencia saltar a lo que realmente les interesa.

Para conocer más sobre esto, puedes consultar este maravilloso artículo de WebAim.

Modales
Los modales son complicados de manejar. Cuando se abre uno el primer elemento que hay en él debe recibir el foco y, conforme navegues por él, no debemos salirnos de esa pantalla, moviéndonos cíclicamente por los elementos del modal. Asimismo, se deben poder cerrar con la tecla escape y, al hacerlo, el foco debe volver a la página principal desde la que se abrieron. Un ejemplo correcto es este de W3C.