• Saltar a la navegación principal
  • Saltar al contenido principal

Vicent Sanchis

Accesibilidad, Ciencias de la Visión y Desarrollo WordPress

  • Sobre mí
  • Servicios
  • Blog
  • newsletter
  • Contacto

Llega Firefox 84 con una interesante herramienta para ayudar en el análisis de la accesibilidad

11/01/2021 por Vicent Sanchis Deja un comentario

En diciembre de 2020 llegó la versión 84 de Firefox, hoy mismo estamos ya en la 84.0.2. Pero bueno, una de las novedades más interesantes de la versión 84 para la accesibilidad es que ha aparecido una función nueva: mostrar el orden en el que los elementos de la página reciben el foco del teclado.

¿Y eso para qué sirve?

Hasta ahora normalmente vamos recorriendo la  página con la tecla tabulador para ver cómo se van seleccionando los diferentes elementos y de paso comprobar el estilo del foco de teclado.

Esta herramienta nos sirve para predecir cuál es el orden sin tener que recorrer la página. No va a quitarnos de pulsar la tecla tabulador, principalmente para comprobar el estilo de foco de cada elemento y verificar que no se produzcan trampas de teclado pero nos ayuda durante el análisis o si necesitamos hacer una captura para informar a un colaborador o al cliente.

ChromeLens permite hacer algo similar evidenciando mejor cual va a ser la ruta de escaneado que deberán seguir los ojos y tal vez evidencie mejor posibles inconsistencias en el diseño de la página.

Ten en cuenta que la herramienta de Firefox está en fase beta y que siempre es bienvenido que se incluyan con el navegador herramientas que nos ayuden en el análisis de la accesibilidad web sin tener que recurrir a plugins externos. Así el resto de developers no tienen excusas 😉

¿Cómo se usa?

El uso es muy simple. Hacemos clic con el botón derecho y seleccionamos en el menú la opción “Inspeccionar las propiedades de accesibilidad” o similar (figura 1)

Figura 1: menú contextual en Firefox 84

Se despliegan las herramientas para desarrolladores con la pestaña de accesibilidad seleccionada y hállase aquí la novedad un checkbox para activar “mostrar el orden de tabulación” (como siempre traducción a mi libre albedrío). Lo activamos y voilà! se activa un overlay en el que aparecen con un borde negro los elementos a los que podemos acceder por teclado y para cada elemento se indica mediante una etiqueta el orden en el que recibirán el foco del teclado como se puede ver en la figura 2.

Figura 2: ejemplo de la herramienta activada en mi página de inicio

Probablemente te has fijado que en la figura 2 no aparece el número 1, ¿dónde está el número 1?. Debajo del 2. En mi página, con el diseño actual, los dos primeros elementos que reciben el foco del teclado son los enlaces de salto al contenido y al menú de navegación (este último realmente es innecesario y lo quitaré) como puedes ver en la figura 3.

Figura 3: enlace de salto seleccionado

Por tanto, ten en cuenta que los elementos que no se muestran pero pueden recibir el foco estarán marcados. También, ten en cuenta que la herramienta no es dinámica. Una vez activado puedes ir moviendo el foco del teclado y el overlay irá variando, pero si ejecutas alguna acción que añada o elimine elementos no aparecerán en el orden, debes desactivar la herramienta y volverla a activar.

Conclusión

Una herramienta muy sencilla y a la vez con un potencial muy interesante. Está en beta pero es muy interesante y útil para analizar el comportamiento de una página cuando se navega por teclado.

Archivado en: Accesibilidad, Novedades Etiquetado como: firefox, herramientas accesibilidad

Interacciones del lector

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información sobre protección de datos

  • Responsable: Vicent Sanchis
  • Fin del tratamiento: Gestión de los comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Contacto: datos@vicentsanchis.com.
  • Información adicional: Más información en nuestra política de privacidad.

twitter linkedin
  • Aviso legal
  • Política de privacidad
  • Política de cookies

vicentsanchis.com 2021

Utilizamos cookies para darte la mejor experiencia en nuestra web.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Política de cookies

Más información sobre nuestra política de cookies (se abrirá en una nueva pestaña)

Powered by  GDPR Cookie Compliance