Actualmente contamos con un sin fin de herramientas métricas que nos permiten analizar diversos factores, desde cuantos usuarios tenemos dentro de nuestra página web por un determinado número de tiempo, hasta cuantos usuarios están del home de nuestro sitio desde un teléfono por más de una hora, así como el lugar desde el que nos visitan.
A pesar de esto, tenemos una debilidad, ya que no contamos con la posibilidad de saber “quien se encuentra del otro lado de la pantalla”, con esto nos referimos a que no conocemos el contexto en el que se encuentran los usuarios que visitan nuestra web.
Los contextos pueden variar para cada persona, pero esto nos deja claro que no sabremos si nuestro usuario puede presentar alguna discapacidad, ya sea motriz, visual, intelectual, entre otras. Por lo cual, tengo un par de preguntas para ti, ¿Conoces que es la accesibilidad Web?, ¿Sabes que es A11Y?.
¿Qué es A11Y?
Seguramente habrás leído “a once y” o “a uno uno y”, Pero, ¿qué significa esto?, A11y es un numerónimo de accesibility, ¿y qué es un numerónimo?, en la siguiente imagen se explica por sí solo.
“A” corresponde a la primera letra de accesibility, “Y” corresponde a la última letra de accesibility, y “11” corresponde a los 11 caracteres existentes entre “a” e “y” de la palabra, lo cual nos deja con un resultado de “a11y”, siendo “ALY” su correcta pronunciación.
¿Qué es la accesibilidad?
La accesibilidad, en pocas palabras es la posibilidad de que cualquier persona pueda acceder al contenido de una web, sin importar en qué contexto, situación, o discapacidad se encuentren.
Imaginemos esta situación. Estamos saliendo del supermercado, con nuestras bolsas de compras en una mano, y nuestro celular en la otra. Por esta situación y por este momento solo podemos utilizar el móvil con una mano, y nos surge la necesidad de hacer zoom en nuestro celular. Para poder hacer zoom-in o zoom-out necesitamos realizar los gestos Pinch y Stretch.
Lo cual se nos complica un poco, porque solo podemos utilizar una mano, en cambio si el gesto para poder hacer zoom-in, o zoom-out fuera con Double-Tab, esto sería mucho más fácil de manejarlo con una mano.
En esta situación, por un pequeño momento estuvimos en el lugar de una persona que por x circunstancia solo puede utilizar una sola mano para lograr su objetivo.
De esto trata la accesibilidad, de dar la comodidad, la facilidad y la posibilidad de que cualquier persona pueda acceder al contenido de nuestra Web.
Veamos otro ejemplo. Una persona con daltonismo trata de registrarse en x plataforma, de tal manera que la plataforma da un feedback de colores, es decir, para mostrar si la información es correcta, colorea de verde el input, y de rojo para la incorrecta, como se muestra a continuación.
Información Correcta
Información incorrecta
Esto causa que esta persona no identifique que está mal y que está bien, por lo tanto, utilizar un feedback de colores no es buena opción, AL MENOS QUE, lo acompañemos de un segundo feedback como se muestra en la siguiente imagen.
De esta manera cualquier persona sabe e interpreta qué información es correcta y cuál no, y mejor aun, también sabe el porque es incorrecto.
¿Como hacer mi sitio web Accesible?
Antes que nada tenemos que tener en cuenta un par de puntos.
-
NO pensar que solo trabajamos para un grupo de personas.
Así como Mobile First toma el celular como primera instancia de nuestra aplicación, y se comienza a trabajar por ello, debemos considerar la accesibilidad desde un principio y trabajar en ello.
De esta manera no lo dejamos al final, y evitamos una refactorización completa o parcial en nuestra aplicación para poder agregar la accesibilidad una vez que ya se haya terminado.
-
Considerar la accesibilidad como un sí fuera Mobile First
Nos referimos a no tener pensamientos como “Porqué hago esto si solo es para un pequeño porcentaje de mis usuarios”, “Tengo más usuarios que no necesitan esto”, ya que son pensamientos erróneos.
Al hacer un sitio accesible no solo llegará el contenido a personas con discapacidad, sino a muchas más. Un claro ejemplo de esto fue la situación planteada anteriormente, en la que una persona con capacidad de usar perfectamente sus dos manos, se vio obligada o solo utilizar una mientras utilizaba el celular para navegar.
¿Necesitas otro ejemplo?, claro, aquí tenemos otro.
Todos conocemos los subtítulos, estos subtítulos fueron creados pensando en personas con problemas auditivos, ¿pero adivina que?, hoy en día todo mundo los utiliza, ya sea para apoyarse y entender mejor el contenido de un video en un idioma que no dominamos completamente, o para ver cualquier película, serie, anime, etc en la que el doblaje no nos agrada y preferimos consumir su contenido en idioma original y subtítulos de nuestro idioma.
-
Conocer los estándares de accesibilidad.
Tratemos de conocer las pautas de la accesibilidad Web, así como las recomendaciones que podemos encontrar aquí, pero, no de principio a fin, ya que esto es demasiada información, y el tratar de asimilar toda antes de implementar, nos causará dolores de cabeza.
6 tips para una web accesible
1. Imágenes.
Utilicemos el atributo “alt” para describir la función de cada elemento, así es, es “alt” que acompaña a la etiqueta "img", nunca la dejamos vacía.
1<img src="mi_imagen.png" class="article__img" alt="función de esta imagen" />
2. "usemap" en imágenes
Además de utilizar “alt” debemos de asegurarnos de utilizar “usemap” especialmente en imagen de mapas que contenga los nombres de las áreas, para que estos nombres no solo existan en la imagen, si no también en el código.
Para utilizarlo necesitamos la etiqueta “img” y dentro de ella su atributo “usemap” de la siguiente manera
1<img src="/mexico.png" alt="Workplace" usemap="#workmap">
Teniendo identificado nuestro atributo "usemap" procedemos a utilizar lo siguiente
1<map name="workmap"> 2 <area shape="rect" coords="34,44,270,350" alt="link" href="link.htm"> 3 <area shape="circle" coords="290,172,333,250" alt="otherLink" href="otherLink.htm"> 4</map>
Dónde “map” lleva como atributo “name” y “name” lleva como valor el “usemap” de la imagen en la que queremos utilizarlo.
Y la “area” necesita "shape", para dar la figura del área, “coords”, para definir las coordenadas de la imagen donde quieres que esta figura se posicione respecto a la imagen, “alt” para describir la función, y “href” por si queremos redirigir a algún otro lado al dar clic.
3. Multimedia
Facilitemos los subtítulos
4. Enlaces con hipertexto.
Evitemos utilizar el famoso “Click aquí”, si no que proporcionamos un texto que tenga sentido al enlace. Por ejemplo: “Te invitamos a que conozcas EDteam”. De esta manera se sabe a dónde nos dirigimos.
5. Organización en páginas.
Utilicemos un buen flujo en nuestro código HTML, así como títulos cuando son necesarios, listas artículos y divisores. Además dejar que CSS se encargue de los estilos.
De esta manera aseguraremos que nuestra página tenga una estructura coherente y herramientas como lectores de pantalla puedan dar un buen seguimiento.
6. Utilizar herramientas.
Existen herramientas que nos ayudan a medir la accesibilidad de nuestro sitio, una de ellas es la extensión “axe”, en el que podemos encontrar que es lo que estamos haciendo mal y que es lo que podemos mejorar.
También contamos con la ayuda de nuestro buen amigo Google que nos brinda aún más extensiones para Google Chrome, simplemente entrado al menú de nuestro navegador configuración > opciones avanzadas > agregar características accesibles y podremos encontrar muchas extensiones, como potenciadores de colores, reguladores de contraste lectores de pantalla, etc.
El mundo de la accesibilidad web es muy amplio, así que llevemoslo con calma para aprender a aplicar todas sus pautas, si te interesa saber mas sobre esto, siempre puedes ir a a11yproject, donde encontrarás tips de diseño y artículos relacionados, y también tenemos la opción de W3C donde encontraremos todos los principios de la accesibilidad web.
Tengamos siempre presente la accesibilidad web, ya que el tener un sitio accesible nos ayudará a llevar nuestro contenido a muchas más personas, y a su vez facilitaremos la navegación en nuestra web para más usuarios en general, la accesibilidad web es importante, y no tenemos que dejarla de lado.