Navegando con teclado

Esto va sobre #AccesibilidadDigital

¿Alguna vez te has detenido un momento, en una acción cotidiana en el mundo web, a pensar si todos lo hacen cómo tú? O sencillamente ¿Crees que porque lo percibes y operas cotidianamente con normalidad, todo el mundo es capaz de hacer una sencilla acción?

Te propongo algo muy sencillo, “ponerse en el lugar de otra persona” y gestionar la autorización de las cookies de una página web.

Metodología

Supongamos que somos un usuario con una discapacidad temporal, permanente o situacional. No podemos usar el mouse del ordenador y tenemos visión baja, vamos a buscar casa en una plataforma inmobiliaria con un dispositivo de escritorio y tendremos que valernos únicamente del teclado.

Entraremos en tres plataformas, las cuales llamaremos como: “Opción A”, “Opción B” y “Opción C” y ver cómo navegar la ventana de cookies con el teclado.

Entramos en cada site y se presenta una ventana modal con la configuración de cookies que debemos aceptar para seguir navegando en cada una de ellas.

Primer vistazo al entrar en las páginas: Páginas de inicio oscurecida con un velo creado por CSS, llevando el foco o mi atención al modal de configuración de cookies para realizar alguna acción y permitir navegar por la página. Hasta aquí vamos bien.

Todo elemento debe ser navegable por teclado

Las personas con discapacidad visual, algunas con discapacidad motriz y muchas otras no utilizan el mouse/ratón, utilizan teclados o tecnologías asistivas que las emulan. Si la página es navegable y operable por teclado tenemos garantizada parte de la accesibilidad. Para navegar con teclado las teclas más usadas:

· Flecha abajo y arriba para avanzar de arriba abajo por los textos
· Tab para avanzar entre elementos interactivos
· Shift tab para retroceder entre elementos interactivos
· Enter o barra espaciadora para accionar los formularios, desplegables y controles en general

También tengamos en cuenta:

· La secuencia de navegación debe ser la misma que la visual
· El foco debe ser visible, nuestros elementos o componentes interactivos al ser enfocados toman protagonismo.
· No debe haber trampas para el foco
· No olvidemos tener contraste suficiente

Continuemos…

Iniciamos la navegación por teclado, usando principalmente las teclas TAB y BARRA ESPACIADORA… nos encontraremos con lo siguiente:

Opción A / Discovery:

Al hacer TAB no cambia nada en la interfaz, repito la acción y sigue sin ocurrir nada. “Ops! no sé dónde estoy, tampoco sé si estaré marcando algo”, ya que no se aprecia ningún estado de FOCO en links o botones. Si continúas clickando TAB vemos que la página en cuestión se mueve, pero sigue oscurecida y sin permitir que podamos usar el servicio que ofrece la plataforma, ni aceptar o rechazar las cookies.

• Dato: cuando haces TAB en una página web puedes observar en la barra de estado del navegador algo similar a cuando usas el ratón y pasas por un enlace: te muestra un destino.

En resumen:

• El estado de foco no es visible en enlaces o botones.
• La página oscurecida se mueve al navegar con TAB, cuando solo deberíamos interactuar con el modal.
• No es fácil aceptar, rechazar o configurar las cookies.

Opción B / Discovery:

Iniciamos como en el caso anterior y al hacer TAB observaremos el FOCO en un enlace, un recuadro azul, que indica donde estamos y podríamos accionar este enlace con la barra espaciadora o la tecla ENTER…

Debemos ir hasta “Aceptar y cerrar” con TAB y con la barra espaciadora aceptar las cookies… pero ¡sorpresa! al llegar al botón azul el FOCO se quiebra o no funciona ya que el tono del borde del FOCUS es similar al fondo del botón, y tienen una pobre relación de contraste entre ellos. También hay que considerar que el color de fondo del botón en FOCUS es el mismo en su estado normal y esto hace que pase desapercibido cuando tienes alguna deficiencia visual.

Si continuamos haciendo TAB podemos comprobar que hasta no realizar una acción en este modal no podemos ir a la navegación de la página (no salir del modal), y esto está bien, porque es necesaria una acción por parte del usuario, la navegación fantasma (del caso anterior) no ocurre en esta página, pero seguimos sin poder aceptar las cookies 😞.

En resumen:

• El borde del foco y el color de fondo de los botones tienen bajo contraste.
• El color de fondo del botón en foco es el mismo al del estado normal.
• Es necesario realizar 143 TABs para llegar al botón de aceptación de cookies.

Opción C / Discovery:

Al hacer TAB no ocurre nada en el modal, pero si te fijas se puede percibir que el foco se mueve por la página oscurecida (donde no debería estar), impidiendo navegar por el modal, que tiene nuestra atención, y ejecutar alguna acción con claridad en el mismo, esto es un error o una mala práctica. Un total de 143 TABs hay que realizar para llegar al botón en el que se deben aceptar las cookies, o 141 TABs para cerrar el modal, pero lamentablemente los botones del modal no reciben foco y no sabemos si están marcados.

En resumen:

• El foco no se mueve claramente por el modal al presionar TAB cuando iniciamos la navegación.
• Es imposible navegar por el modal y realizar acciones.
• Se requieren 143 TABs para llegar al botón de aceptación de cookies.
• Los botones del modal no reciben foco.

Las Web Content Accessibility Guidelines (WCAG), también conocidas como Directrices de Accesibilidad para el Contenido Web, son un conjunto de pautas desarrolladas por el World Wide Web Consortium (W3C) con el objetivo de mejorar la accesibilidad de los sitios web y las aplicaciones para todas las personas, incluyendo aquellas con discapacidades.

En un principio quería destacar sobre el no cumplimiento de un criterio específico de la WCAG, pero al explorar los servicios te das cuenta que no se cumplen otros y ves como entre ellos se relacionan y te dan pistas de cómo mejorar.

Resultados:

En resumen te contaré que criterios de la WCAG no se han cumplido en los modales de estas tres plataformas seleccionadas:

1.3.1 Información y relaciones: El usuario se pierde, no sabe dónde está exactamente ni qué acción realizar. Falta una lógica para una buena navegación.

1.3.2 Secuencia significativa: Si debo aceptar las cookies desde un principio, ¿por qué no lo ponen fácil? La página oscurecida no debería navegarse hasta realizar una acción en el modal ¿Por qué tantos TAB para algo que debo resolver en principio? La navegación no es lógica ni intuitiva.

2.4.3 Orden del foco: Ya vimos como en la Opción C requerimos 143 TABs para llegar al botón y en la Opción B de pronto navegaba por la página sin una buena referencia ya que no se puede interactuar con el modal.

2.4.7 Foco visible: Hemos visto como no se cumplió correctamente en los 3 casos, no nos permitía tener una relación correcta con el servicio porque los focos de botón o enlace no están construidos para ser accesibles. No puedo operar correctamente por los componentes.

Hemos visto como en estos tres ejemplos analizados se presentan problemas de accesibilidad al momento de encontrarnos con la ventana de cookies, que un usuario sin discapacidad probablemente no percibiría y podría realizar acciones sin dificultad.

Recomendaciones

• Implementar las directrices WCAG 2.2 para garantizar la accesibilidad de los elementos web.
• Mejorar el contraste de colores y los estados de foco visibles.
• Asegurar un orden de navegación lógico y consistente.
• Probar los sitios web con usuarios con diferentes discapacidades.

¿Crees que se me escapa algún criterio a tener en cuenta? O ¿Quizás otro criterio en lugar de alguno de los mencionados? No hay trampa ;) hagamos visible a la accesibilidad digital y si se puede iniciar algún debate que nos ayude a crear mejores productos digitales, bienvenidos son… Esto va de nutrirse, iterar y mejorar. Recuerda que la accesibilidad digital es un derecho fundamental que debe garantizarse para todos los usuarios. Es necesario un compromiso por parte de desarrolladores, diseñadores y empresas para crear productos digitales accesibles e inclusivos.

#Accesibilidad #AuditandoCosasAlAzar #WCAG #BrechaDigital #Inclusión #CalidadDigital #UX #UI #TecnologiasAsistivas #Discapacidad #tab #focus #NavegacionPorTeclado