Accesibilidad de escaparate

Jan 12 2023
Los criterios de Éxito del Dilema de Accesibilidad para la accesibilidad web según las WCAG 2.1 (Pautas de Accesibilidad al Contenido Web) podrían ser abrumadores si se ven solo desde la perspectiva del libro de texto.
Una ilustración artística muestra un collage de imágenes. Una mujer con una bufanda amarilla y una chaqueta negra con un logotipo de accesibilidad web con marca de agua. Un usuario ciego masculino sobre un fondo de teclado. Una mano con un yeso de vendaje. Un signo de dólar conecta las 3 imágenes.

El dilema de la accesibilidad

Los criterios de éxito para la accesibilidad web bajo las WCAG 2.1 (Pautas de Accesibilidad al Contenido Web) podrían ser abrumadores si se ven solo desde la perspectiva del libro de texto. En mi experiencia, los desarrolladores y gerentes tienen reacciones de incomodidad casi unánimes ante los proyectos de Accesibilidad Web. Tales como: ¿tenemos que leer "todo eso", es simplemente "tan aburrido", "simplemente ejecute el validador"... grillos y plantas rodadoras para resumir.

Como desarrollador y aprendiz de accesibilidad web, me di cuenta de que una vez superado el "dolor insoportable" de leer los criterios, se puede abordar desde diferentes ángulos. Desde el ángulo de Experiencia de Usuario por ejemplo, y también por capas. Lentamente, pero realmente, con solo probarlo. Algo que los desarrolladores hacen todo el tiempo. Ahora, eso generalmente me lleva a las siguientes preguntas y respuestas:

Pero, ¿qué necesitamos “probar” exactamente?

Lo que inconscientemente hacemos la mayor parte del tiempo: el viaje del usuario .

¿Como hacemos eso?

Empatizando conscientemente con las discapacidades que puedan tener nuestros usuarios, es decir, simular o emular.

¿No es suficiente probar mi sitio con un validador?

Que no es. Los validadores son de gran ayuda cuando se analizan sitios web grandes para algunos criterios. Como el 20% de ellos solamente. Sin embargo, he visto a validadores pasar sitios con gran éxito solo para darse cuenta de que, de hecho, no son accesibles de forma práctica.

¿Analogía concreta, por favor?

Creer que solo porque cumple con algunos criterios hace que su sitio web sea "accesible" hasta cierto punto. Sería como pensar que su edificio de oficinas es "accesible" porque tiene un botón muy grande para abrir la puerta automáticamente en la entrada principal... pero solo después de pasar por un estacionamiento de grava y subir una escalera. Entonces, ¿cómo llega el usuario a la puerta para empezar?

Accesibilidad de escaparate

Muchos sectores están sujetos al cumplimiento de la Accesibilidad web en estos días, para algunos, como el gobierno, es obligatorio. El comercio minorista en línea se ha convertido en el objetivo de un número creciente de demandas , también los usuarios con discapacidades tienen expectativas claras , por lo tanto, la creciente necesidad de Accesibilidad de escaparate va en aumento. A veces, marca la diferencia entre un enfoque de "conducción al cobro" y un resultado de "conducción al juicio".

Instalaciones

Ilustremos el proceso con un ejemplo, pero primero establezcamos algunas premisas:

  1. El objetivo principal de un escaparate es permitir que los usuarios paguen productos.
  2. Los elementos de la interfaz deben facilitar al usuario completar el pago, incluidos los usuarios con discapacidades.
  3. Los desarrolladores y evaluadores de control de calidad a menudo prueban pretendiendo que un usuario puede pasar con éxito del punto A al B o Z en la interfaz. Las mismas personas también deberían probar que los usuarios con discapacidades pueden llegar a los mismos puntos.
  4. Pasar con éxito del punto A al B o Z en una prueba, mientras se emula a una Persona con discapacidad, dará como resultado una serie de criterios de accesibilidad cumplidos con éxito.

Antes de entrar en qué es una Persona , aclaremos la empatía . Suena como algo fácil de hacer, lo hemos escuchado muchas veces: “ponernos en los zapatos de los demás”, ¿qué tan difícil puede ser? Bueno, resulta que las personas tienen diferentes niveles de empatía y suelen estar influenciadas por sus propias experiencias de vida... así que no es tan fácil.

La simpatía NO es empatía

Además, las diferentes percepciones de lo que significa empatía complican las cosas, he escuchado muchas definiciones espontáneas: se trata de tener un gran corazón, ser todo sentimental acerca de algo, ser filántropo, o leer las emociones “entre líneas”… sí, supongo que sí. muy bien podría ser todo eso dependiendo del contexto de la conversación, pero aun así, todo lo mencionado está más cerca de la simpatía que de la empatía. Ahora bien, cuando se habla de Accesibilidad Web , la empatía es por suerte un tema muy pragmático. Por ejemplo, una tienda en línea es accesible o no lo es. En otras palabras, "medio accesible" no funciona si un viaje crítico no tiene éxito. Como no sería para una tienda física. Los compradores con discapacidades pueden o no pueden entrar y comprar.

Independientemente de cómo uno se “sienta” sobre el hecho, nuestras buenas intenciones, pensamientos y emociones vertidas en pensar en los usuarios que no pueden usar el escaparate no lo harán más accesible. Eso es simpatía. Es agradable. es motivacion Ayuda. Crea conciencia. Pero no hace que los sitios web sean accesibles.

Mi historia habitual para “inducir” a las personas a la empatía es la siguiente, agreguemos primero un ambiente relajado y supongamos que estamos en un restaurante o un bar, rodeados de familiares, amigos o transeúntes ocasionales, generalmente el contexto en el que cuento esta historia:

Suponga que usted (un usuario sin discapacidades) está comprando en línea un producto simple, como digamos... un pañuelo amarillo para mujeres, y de repente el mouse de su computadora deja de funcionar (se agota la batería) y tiene que finalizar el pago usando solo el teclado _

Resistencia a la empatía

Por supuesto, siempre hay resistencia a este ejercicio de empatía, y es normal que nos saquen de nuestra zona de confort. Así que escucho cosas como: "¿Qué pasa si estoy usando una computadora portátil que tiene un mousepad incorporado?"... Acordemos que ese no es el punto. Puede parecer una tontería tener que empatizar con algo tan banal como tener un ratón, pero es relevante para todo el proceso.

Tengo que señalar un factor generacional en estas audiencias casuales de mis historias; tengamos en cuenta que los usuarios que tenían una computadora a mediados de los 80 pueden recordar cómo moverse en la pantalla con un teclado, en ese entonces los ratones de bola apenas comenzaban a introducirse y no fue hasta finales de los 90 que los ratones ópticos se convirtieron en disponible comercialmente, pero los usuarios que nacieron en esas décadas pueden verse sorprendidos al imaginar un escenario de solo teclado. Como dije, no es tan fácil empatizar con él.

De todos modos, una vez que se asimile el ejemplo y la gente empiece a tirar teorías y a recordar o averiguar cómo moverse en la pantalla usando solo el teclado , entonces tendremos una idea, un plan, una hoja de ruta —un viaje— sobre cómo terminar el pago. .

Bien, una vez que haya asimilado este viaje del teclado, agreguemos complejidad : Supongamos que ha comprado este artículo muchas veces (obtenga bufandas amarillas para todos) y ahora sabe el proceso de memoria, conózcalo "tan bien" que puede hacerlo sin un ratón, tan bueno que puedes hacerlo “con los ojos cerrados”… ¿en serio? … intentemos eso: navegación con teclado + ojos cerrados .

Personas con discapacidades

Antes de cerrar los ojos , definamos qué es una Persona ; En el contexto del diseño de la experiencia del usuario (UX), las " personas " son usuarios arquetípicos cuyos objetivos y características representan las necesidades y limitaciones de un grupo más grande de usuarios. Sí, poner caras a los usuarios ayuda con el proceso de empatía, al buscar en Google "personas para la accesibilidad" podemos encontrar muchas personas fácilmente disponibles para usar, pero sí, más lectura... grillos y plantas rodadoras de nuevo.

Dicho esto, para seguir con la narración informal y simplificada en el bar, y dado que este artículo se está haciendo largo (perdiendo el punto de no tener que leer tanto), simplifiquemos en un breve párrafo un par de personajes que pueden ser fácilmente emulado por usuarios sin discapacidades. Ingrese a Jane y John , viniendo de un artículo anterior , me han ayudado antes al establecer las perspectivas y expectativas de la base de accesibilidad.

  • Jane: usuaria diestra, que recientemente se fracturó la mano derecha, tiene que usar la navegación solo con el teclado, confía en su vista para saber dónde se encuentra en la pantalla y para llegar al siguiente elemento en una interfaz de usuario.
  • John: usuario invidente, utiliza la navegación solo con el teclado, depende de la vocalización de un lector de pantalla para saber dónde se encuentra y llegar al siguiente elemento en una interfaz de usuario.

Hay muchas formas en que un usuario puede navegar por un escaparate, pero siempre hay caminos que son más comunes, aquellos en los que el escaparate realmente genera dinero son los recorridos críticos del usuario . La navegación solo con el teclado no es una excepción a esto, así que pongámonos de acuerdo en un viaje súper simple promedio basado en el producto de una historia en Storefront Accessibility, un pañuelo amarillo para mujeres .

Viaje crítico del usuario

Caso de uso de prueba: Jane quiere comprarse una bufanda amarilla. Por otro lado, John quiere comprar la misma bufanda para su novia. Para aclarar más, Jane y John , no están relacionados, no se conocen.

Para ambos, Jane y John , el viaje crítico para comprar un pañuelo amarillo para mujer será algo así:

Presione el tabulador para buscar el campo > escriba "Bufanda amarilla para mujer" > Presione el tabulador para el primer producto (simulando que es el pañuelo amarillo) > Inicie el proceso de pago.

¿Emular o simular?

Estamos llegando allí, gracias por leer hasta aquí. La diferencia entre simulación y emulación es sutil. Ya que ambos incluyen la palabra “imitación” vamos a ceñirnos a ese concepto. Para el siguiente ejemplo, vamos a usar software de emulación, así que llamémoslo emulación, pero sepa que definitivamente me refiero a imitación.

Ahora, la imitación es clave para empatizar, y debemos hacer eso lo más cerca posible de cómo Jane y John navegarán hacia esa bufanda amarilla en una tienda. Sabemos que ambos usarán la navegación solo con el teclado, por lo que nos deja las siguientes teclas para completar el pago.

Interacciones de teclado

  • PESTAÑA
  • MAYÚS+TAB
  • ESPACIO
  • INGRESAR
  • Teclas de flecha.

Ok, aquí es donde desafío a la audiencia del bar y a usted, el lector, es broma, lo invito amablemente a elegir cualquiera, o varios, escaparates en línea que hay en la web. Pero lo más importante, uno en el que puedas encontrar un pañuelo amarillo para mujer e intentar llegar lo más lejos posible en el proceso de pago emulando a Jane & John . Dicho esto, "en realidad" no tienes que comprar la bufanda cada vez, no si no quieres.

emulando a jane

Siga el viaje crítico del usuario usando solo las teclas del teclado que usaría Jane .

emulando a juan

Active la extensión ChromeVox y, ¡por fin! Cierra los ojos y luego sigue el viaje crítico del usuario escuchando lo que te dice la vocalización y usando solo las teclas del teclado que usaría John .

Problemas comunes

A medida que compara su experiencia de emulación a través de diferentes tipos de accesibilidad de la tienda, es posible que se encuentre con problemas como: no poder pasar al siguiente elemento lógico en la página al aterrizar en elementos aleatorios, no poder tabular desde ningún punto hacia adelante (trampa de teclado) , incapaz de escuchar una descripción significativa del producto, como su color o su precio. Lamentablemente, esto es muy común y es un indicador de la falta de accesibilidad web en un sitio web en particular.

Cumplimiento de criterio

Aclaración de términos: criterio es plural; criterio es singular.

Ahora, si ha logrado finalizar con éxito el proceso de pago emulando a Jane & John , entonces esa tienda ha cumplido con los siguientes criterios de WCAG 2.0 .

Tabla que muestra 16 criterios para la emulación exitosa de Jane y John (teclado, sin trampa de teclado, omitir bloques, orden de enfoque, navegación consistente, enfoque visible, contenido que no es de texto, información y relaciones, título de la página, propósito del enlace, idiomas de la página, Enfoque, Identificación de errores, Análisis, Encabezado y etiquetas, Prevención de errores). Los primeros 6 criterios son para Jane y John, y los 10 restantes son solo para John.

Observe cómo la mayoría de los criterios son de Nivel A con solo un par de Nivel AA. En mi opinión, los anteriores son los criterios más importantes a cumplir “para empezar”. Establecen la base para construir una experiencia de usuario más rica encima de ellos. Por ejemplo, agregar más criterios de nivel AA o conectar otras tecnologías de asistencia como pantallas braille. Considerémoslos la parte difícil, o independientes de criterios “más simples”, como los relativos al uso del color, el tamaño del texto, el vídeo y el audio.

Bueno, aquí es donde termina la historia en el bar. Ya sea si pudiste o no terminar la emulación como Jane & John . Incluso si solo lo intentaste un poco, se merece un brindis. Como ya se habrá dado cuenta, al cerrar los ojos comenzó a "ver" dónde están los problemas con Storefront Accessibility. Entonces, ¡ salud por eso! con lo que estés bebiendo.

En conclusión

  1. Podemos validar la Accesibilidad de la Tienda al “caminar el camino” con empatía.
  2. Al planificar, desarrollar y probar un escaparate en línea, cualquier esfuerzo en el proceso para eliminar errores relacionados con los 16 criterios mencionados anteriormente facilitará el proceso de pago para los usuarios con discapacidades.
  3. Un desarrollador web debe asegurarse de que un viaje de usuario crítico accesible realmente funcione antes de entregárselo al probador de control de calidad.
  4. La mejor herramienta de validación es la empatía.
  5. A veces, al cerrar los ojos, podemos “ver” dónde está el problema.
  6. Los compradores con discapacidades deberían poder comprar en línea como lo hacen en las tiendas físicas.
  7. Nadie está exento de discapacidades a lo largo de la vida, en el mejor de los casos: todos envejecemos.
  8. La accesibilidad web debe verse como una oportunidad comercial en cualquier estrategia de obtención de efectivo antes de que se convierta en un escenario de demanda .