Navegación por teclado: cómo asegurar la usabilidad sin un ratón

Accesibilidad
02/7/2024
|
Torresburriel Estudio
Teclado iluminado en colores azules y verdes, representando la navegación por teclado.

La navegación por teclado en páginas web es una característica esencial para garantizar la accesibilidad y usabilidad de los sitios web. Esta funcionalidad permite a los usuarios interactuar con la totalidad del contenido y las funciones del sitio utilizando solo el teclado, sin necesidad de un mouse. 

Es especialmente crucial para personas con discapacidades motoras o visuales, que dependen del teclado para navegar y realizar tareas en línea. Al implementar una navegación por teclado eficiente, los diseñadores y desarrolladores web facilitan un acceso más rápido y directo a la información y funcionalidades del sitio.

Asegurar que un sitio web sea completamente navegable por teclado implica cumplir con varios estándares de accesibilidad, como los establecidos por las Directrices de Accesibilidad para el Contenido Web (WCAG). Estos estándares no solo ayudan a crear una web más inclusiva, sino que también mejoran la usabilidad y satisfacción de todos los usuarios.

Un excelente ejemplo de accesibilidad y navegación por teclado bien implementada sería el sitio web de la BBC, que destaca por las siguientes características:

  • Todos los elementos interactivos, como enlaces, botones y menús desplegables, son accesibles mediante el teclado, lo que permite a los usuarios navegar por el sitio sin necesidad de un ratón. 
  • Los indicadores de foco visibles muestran claramente qué elemento está seleccionado, mejorando la orientación del usuario. 
  • La gestión adecuada de los diálogos modales asegura que el foco del teclado se mueva automáticamente al modal al abrirse y regrese al activador original al cerrarse. 

Otro ejemplo de buena implementación de accesibilidad y navegación por teclado, es La casa del libro. Entre sus puntos fuertes se encuentran:

  • La navegación completa mediante el teclado, que hace que todos los elementos interactivos, como enlaces y botones, sean accesibles sin necesidad de un ratón, algo fundamental para usuarios con discapacidades motoras.
  • Indicadores de foco visibles que muestran claramente qué elemento está seleccionado, ayudando a los usuarios a orientarse mejor.
  • Un orden de tabulación lógico, que facilita la navegación y permite un acceso intuitivo a la información.
  • Enlaces «skip to content», que mejoran la eficiencia de la navegación al permitir a los usuarios saltar directamente al contenido principal.

Cumplimiento de estándares de accesibilidad (WCAG)

El cumplimiento de los estándares de accesibilidad establecidos por las Directrices de Accesibilidad para el Contenido Web (WCAG) es fundamental para garantizar que los sitios web sean utilizables por todas las personas. Las WCAG son una serie de recomendaciones desarrolladas por el World Wide Web Consortium (W3C) para hacer que el contenido web sea más accesible. 

Las WCAG se basan en cuatro principios clave, conocidos como P.O.U.R: Perceptible, Operable, Comprensible y Robusto.

Como ya hemos hablado en este blog en otras ocasiones, las WCAG definen tres niveles de conformidad para medir el grado de accesibilidad de un sitio web: 

  • Nivel A: el nivel mínimo de conformidad. El contenido no accesible en este nivel plantea barreras importantes para los usuarios con discapacidades. 
  • Nivel AA: el nivel de conformidad recomendado, que aborda las principales barreras de accesibilidad y mejora la usabilidad general. 
  • Nivel AAA: el nivel más alto de conformidad, que es el más accesible pero no siempre posible de cumplir en todos los tipos de contenido.

Estándares de accesibilidad para la navegación por teclado

Asegurar la accesibilidad del teclado (Criterio de conformidad 2.1.1)

Todo el contenido y las funcionalidades del sitio web deben ser accesibles mediante un teclado.

Ejemplo: un formulario en línea debe permitir a los usuarios desplazarse entre los campos utilizando la tecla “Tab” y activar botones con la tecla “Enter” o “Espacio”.

Sin trampa de teclado (Criterio de conformidad 2.1.2)

Si un componente del sitio web puede ser navegado usando un teclado, el foco del teclado no debe quedar atrapado en ese componente.

Ejemplo: un menú desplegable debe permitir a los usuarios salir del menú usando la tecla Tab, en lugar de quedar atrapados dentro del menú sin poder continuar navegando.

Orden de enfoque (Criterio de conformidad 2.4.3)

El orden de tabulación debe seguir una secuencia lógica y predecible.

Ejemplo: en una página de producto, el orden de tabulación debe seguir la secuencia: nombre del producto, imagen del producto, descripción, precio, y botón de compra.

Propósito del enlace (Criterio de conformidad 2.4.4)

El propósito de cada enlace debe ser claro y comprensible.

Ejemplo: los enlaces deben tener textos descriptivos como «Ver más detalles sobre el producto» en lugar de «Haga clic aquí».

Acceso al mecanismo de salto (Criterio de conformidad 2.4.1)

Proporcionar un mecanismo para saltar bloques repetitivos de contenido.

Ejemplo: incluir un enlace «skip to content» al inicio de la página que permita a los usuarios saltar directamente al contenido principal, evitando tener que tabular a través de elementos repetitivos como menús de navegación.

Enfoque visible (Criterio de conformidad 2.4.7)

Asegurarse de que haya un indicador visible para el foco del teclado.

Ejemplo: cuando un botón recibe el foco del teclado, debe destacarse con un borde o un cambio de color para que el usuario pueda identificar fácilmente qué elemento está seleccionado.

Acciones de punto de referencia (Criterio de conformidad 4.1.2)

Los controles de la interfaz de usuario deben ser operables mediante el teclado y deben proporcionar información sobre su estado. 

Ejemplo: un control deslizante de volumen debe poder ajustarse con las teclas de flecha y proporcionar retroalimentación visual o auditiva sobre el nivel de volumen actual.

Implementar estos estándares mejora significativamente la experiencia de usuario y cumple con las directrices de accesibilidad establecidas por WCAG.

Principios básicos de navegación por teclado

Estos principios incluyen el uso de un enfoque lógico y visible, donde los elementos interactivos deben ser accesibles en un orden de tabulación predecible, facilitando la navegación mediante teclas como Tab, Shift+Tab, Enter y las flechas de dirección. Es crucial que los elementos con foco sean destacados visualmente para que los usuarios sepan dónde están ubicados en la página. Además, todos los componentes interactivos, como enlaces, botones y formularios, deben ser operables mediante el teclado.

Esto se logra utilizando el atributo “tabindex” para controlar el orden de tabulación de los elementos, garantizando una secuencia lógica y predecible. Es importante evitar valores mayores a 0 para mantener un flujo natural. Se recomienda cambiar los valores de tabindex solo si es absolutamente necesario modificar el orden de navegación por tabulación, ya que introducir valores positivos puede complicar el flujo de navegación.

Asegurándonos de que los usuarios puedan moverse por todos los elementos interactivos (como enlaces y botones) nos aseguraremos un flujo coherente, así como, usando solo las teclas del teclado, como “Tab” para avanzar y “Shift+Tab” para retroceder. Es importante que los elementos se destaquen visualmente cuando están seleccionados, para que los usuarios siempre sepan dónde están en la página. Además, cuando se abren ventanas emergentes o diálogos, el foco del teclado debe ir automáticamente al primer elemento interactivo dentro de esa ventana, y regresar al botón o enlace original cuando se cierra.

Al seguir estas mejores prácticas, los diseñadores y desarrolladores pueden crear sitios web que no solo cumplan con los estándares de accesibilidad (WCAG), sino que también proporcionen una experiencia de usuario más intuitiva y eficiente. La inclusión de funcionalidades de navegación por teclado no solo promueve la equidad y la inclusión digital, sino que también mejora la satisfacción del usuario y potencialmente incrementa la retención y el tráfico del sitio web. 


Foto de portada de Florian Krumm en Unsplash.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.