El sector retail es el menos accesible si tenemos en cuenta que es el sector que suma el mayor porcentaje de errores en accesibilidad web (72,9%) según el último “Informe de accesibilidad 2023 WCAG”. En torno a 1.300 millones de personas en el mundo tienen algún tipo de discapacidad, y no darle importancia a la accesibilidad web significa que esas personas con algún tipo de discapacidad no van a poder hacer uso de la web.
Al hablar de accesibilidad web se está haciendo referencia a un diseño online que va a permitir que estas personas puedan percibir, entender, navegar e interactuar en el site. “Existen recursos gratuitos desarrollados por personas comprometidas con la accesibilidad que nos permiten cumplir unos mínimos sin mucho esfuerzo. El 80% de lo que sé sobre accesibilidad lo he aprendido testeando mis desarrollos y aprendiendo de mis fallos. Creo que es una estrategia win-win si la pones en práctica”, explica Noe Medina, desarrolladora front end en Paradigma Digital.
Con la proximidad de Black Friday, un periodo en el que se produce un considerable incremento de compras online, que supone para los retailers en muchos casos más de un 30% de su facturación anual, la tecnológica Paradigma Digital ha querido recopilar una serie de recursos gratuitos para ayudar a facilitar el aprendizaje y la implementación de la accesibilidad web tanto a pymes como a grandes retailers.
1. WAI – Web Accesibility Initiative para aquellos/as que busquen iniciarse en accesibilidad ya que cuenta con un apartado donde ofrecen mucha documentación para formarse, tanto para especialistas en desarrollo como en diseño, además de dar acceso a una pequeña librería de componentes completamente accesibles.
2. Añadir plugins que nos “chiven” qué podemos mejorar. VSCode cuenta con la extensión Web Accessibility que, si bien no recoge todas las normas, sí que recoge las básicas. “Es una herramienta muy útil y fácil para iniciarse. La forma de mostrarlo es mediante un subrayado del código y al pasar por encima el ratón, obtenemos el porqué del error y la sugerencia.” señala Medina.
3. Los linters son herramientas que revisan tu código en busca de errores y también nos pueden servir para mejorar la accesibilidad. Un complemento de accesibilidad es el plugin de eslint para lit-html. Si comprobamos el listado de reglas nos validará prácticamente todos los errores más comunes que las estadísticas sobre accesibilidad web nos indican que se repiten más.
4. Axe, es una herramienta de testing para comprobar la accesibilidad (siempre en desarrollo). Es muy útil porque se han desarrollado diversos plugings como por ejemplo, axe-core disponible para React que permite lanzar una batería de tests de accesibilidad sobre nuestro código, obteniendo no solo el error, sino además un link a la documentación en la que se explica por qué se produce el error y cómo solucionarlo. Además, existe una dependencia para incluirlo en Jest.
5. Pa11y es otra herramienta de testing similar a Axe. Tiene una opción para comprobar el testing de cualquier url de Internet y también de urls en local. Pero en todo caso desde el equipo de desarrolladores de Paradigma remarcan que “solo el 30 % de los errores de accesibilidad se detectan de manera automatizada y siempre se deberá combinar con testeos manuales”.
6. Las devtools de los navegadores también ofrecen algunas herramientas interesantes para comprobar nuestra accesibilidad. Por ejemplo, en Chrome al inspeccionar un elemento e irnos al apartado de “Accessibility” obtendremos la información del árbol de accesibilidad de dicho elemento en las propiedades computadas.
7. En Chrome tenemos la opción de “Rendering” que nos va a permitir emular algunos tipos de discapacidades visuales, así como también algo que también es accesibilidad y no se suele tener muy en cuenta: visualizar nuestro site con preferencias de reducción de animaciones.
8. Accessibility Insights es una herramienta de Microsoft que se puede utilizar en modo extensión en Chrome y en Edge o como app de escritorio en Windows para detectar los errores en una web, que tienes un asistente de navegación por “tabs” que va indicando dónde estás en cada momento y cómo se está realizando la navegación de una manera visual y muy intuitiva.
9. MagentaA11y es una herramienta online que provee de criterios de aceptación a nivel de accesibilidad muy útil porque guía tanto para webs como apps nativas y criterios mínimos para diseño. También especifica qué pruebas deberíamos realizar (navegación por teclado, screen reader en desktop y mobile, herramientas nativas de accesibilidad) lo cual desde el punto de vista del testeo manual es una gran herramienta para la definición de planes de pruebas.
