El comercio electrónico ya se encuentra integrado en el modus de compra de la gran mayoría de la población, y dentro de esta se encuentran las personas con alguna discapacidad que son incapaces de navegar por diversas tiendas en línea y comprar productos en ellas, simplemente porque no están diseñadas con las pautas de accesibilidad de contenido web (WCAG) en mente.
“De acuerdo con el INEGI, se estima que en México 20 millones 838 mil 108 personas tienen una discapacidad. Lo que equivale a el 16.5% de la población”.
En México, la Ley General para la Inclusión de las Personas con Discapacidad menciona que todos los medios de comunicación, incluido el Internet, deben tener su contenido accesible para las personas con discapacidad; y la Ley Federal para Prevenir y Eliminar la Discriminación menciona que los medios de comunicación deben realizar los ajustes necesarios para las personas con discapacidades. Por último, el Artículo 200 de la Ley Federal de Telecomunicaciones y Radiodifusión dentro de sus decretos menciona que las páginas o sitios web deben contar con funcionalidades de accesibilidad.
¿Qué son las pautas de accesibilidad
para el contenido web (WCAG)?
Son directrices cuyo objetivo es permitir que las personas con alguna capacidad diferente puedan navegar por internet fácilmente y realizar diversas tareas por sí mismas.
Estas pautas fueron desarrolladas por el Wide Web Consortium (W3C), una organización internacional que tiene como objetivo crear estándares para la World Wide Web. Fue fundada en 1994 por Tim Berners-Lee, uno de los creadores de la web, y está compuesta por miembros de diversas empresas, organizaciones y gobiernos de todo el mundo.
Este organismo tiene como principal misión asegurar el acceso universal a la web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.
Sus documentos están dirigidos a:
- Desarrolladores de contenido web (autores de páginas, diseñadores de sitios, etc.).
- Desarrolladores de programas de autor.
- Desarrolladores de herramientas para la evaluación de la accesibilidad web.
- Otros que quieran o necesiten un estándar para la accesibilidad web, incluyendo la accesibilidad móvil.
Estas directrices están organizadas en 4 principios, algunas veces se refieren a ellas con el acrónimo en inglés “POUR”:
- PERCEPTIBLE: Los componentes del sitio web deben ser presentados en una forma en la que los usuarios puedan percibirlos, sin importar su discapacidad.
- OPERABLE: La navegación y operación no deben requerir acciones que el usuario no pueda realizar.
- ENTENDIBLE: Los usuarios deben entender cómo usar y navegar un sitio web y el contenido en él.
- ROBUSTO: El contenido necesita ser compatible con tecnología asistencial actual y futura.
Suena complicado, pero no lo es.
¿Quieres saber si tu tienda está optimizada?
¿Cómo optimizar tu ecommerce de acuerdo al WCAG?
A continuación te damos unos puntos clave que abarcan todo el tipo de contenido que puede haber en un ecommerce que harán tu página más accesible:
Organiza el contenido
- Organiza la información en párrafos cortos.
- Sigue una jerarquía lógica, por ejemplo: El título debe ser más grande que los subtítulos, y estos deben tener un tamaño acorde a su importancia.
- Utiliza las etiquetas apropiadas al momento de escribir el código de la página para no confundir a los lectores de pantalla. Por ejemplo, los menús de tu tienda deben tener la etiqueta <nav>.
- Permite a los usuarios saltar contenido sin necesidad de usar la rueda de desplazamiento.
- Evita usar tablas ya que pueden confundir a los lectores de pantalla. Las listas son mejores.
HAZ TU SITIO NAVEGABLE POR MEDIO DE TECLADO
- Las tecnologías de asistencia solo se apoyan del uso de un teclado, por ende necesitas añadir la capacidad de poder navegar por todo tu sitio solo con las teclas.
- El botón más común para navegar es la tecla Tab.
- Los pop-ups deben poder cerrarse usando la tecla ESC.
CUIDA LA LEGIBILIDAD
- El texto y el fondo deben ser fáciles de diferenciar.
- Según la WCAG, el contraste mínimo es 4.5:1 para texto normal y 3:1 para el texto grande.
- Si el contenido informativo será en forma de imagen, evita usar colores muy similares que puedan pasar desapercibidos por las personas daltónicas.
MANTÉN LA INTERFAZ DE USUARIO INTUITIVA
- Los elementos de interfaz de usuario deben tener una jerarquía fácil de entender.
- Proporciona una indicación clara del elemento activo y la ubicación actual del usuario en el menú.
- Estos elementos deben adaptarse a diferentes dispositivos sin cambiar demasiado su orden.
- Los botones deben tener el tamaño ideal para que las personas puedan tocarlos sin problemas. Se recomienda un tamaño mínimo de 44×44 píxeles.
- Agrega cambios visuales en los botones para que brinden una respuesta perceptible al interactuar con ellos y se asegure a los usuarios que están realizando una acción con ellos.
- Asegúrate de que los CTAs tengan textos concisos que transmitan claramente su propósito o función al hacer click en ellos.
VUELVE EL CHECKOUT MÁS ACCESIBLE
- Elimina las restricciones de tiempo durante el llenado del formulario de compra.
- Proporciona mensajes de error claros y descriptivos cuando se produce un error en la validación del formulario.
- Asocia estos mensajes de error con los campos correspondientes, para que los usuarios puedan identificar y corregir los errores fácilmente.
- Utiliza una estructura secuencial y clara para facilitar la navegación y comprensión del formulario.
- Presenta los campos en un orden significativo y lógico, siguiendo una secuencia natural de entrada de datos.
TEN UN CAPTCHA ACCESIBLE
- Este mecanismo de seguridad es muy importante para prevenir actividades maliciosas de software automatizado (bots) a través de la interacción con el famoso “No soy un robot”.
- Para garantizar que todos puedan pasar la verificación es importante que el CAPTCHA cuente con una alternativa auditiva para la gente con discapacidad visual.
HAZ MÁS FÁCIL EL ACCESO A SOPORTE
- Asegúrate de que la información de contacto (chat, whatsapp, teléfono, email) sea visualmente clara.
- Asegura un acceso directo con links que lleven a las respectivas aplicaciones de las formas de contacto.
HAZ ELEMENTOS VISUALES ACCESIBLES PARA TODOS
- Incluye subtítulos en todos los videos que tenga tu página.
- Usa el apartado de texto alternativo correctamente, es decir, describe cada imágen de tu página para que los lectores de pantalla no tengan dificultad al leerla.
- Si requieres usar imágenes animadas, busca que estas tengan una velocidad lenta y/o puedan ser pausadas.
Para conocer más sobre el etiquetado de las páginas, estructuras adecuadas del sitio y la forma en la que deben agregarse los Alt text y descripciones de las imágenes te recomiendo complementar esta lectura con: “Todo sobre SEO, la clave para la visibilidad de tu tienda online”.
Y es que el SEO y la accesibilidad van de la mano, pues si tu tienda online sigue todos los parámetros de la W3C, recibirá una mejor calificación por parte de Google y tendrás mayor posicionamiento en los motores de búsqueda mientras que abres tus puertas a un público que no muchos consideran, pues se tiene normalizada la idea errónea de que toda la gente con capacidades diferentes no puede realizar actividades por sí misma.
Herramientas y recursos te ayudan a revisar la accesibilidad de tu página
- WebAIM: Contrast checker. Esta página ofrece una herramienta útil para evaluar contrastes.
- WAVE Web Accessibility Evaluation Tool. Es una herramienta gratuita que analiza y proporciona un análisis detallado de los problemas de accesibilidad que tiene tu sitio web.
- WebAIM’s WCAG 2 Checklist. Es una herramienta como la de WAVE con la diferencia de que puedes realizar el análisis de accesibilidad de forma manual y con mayor detalle al tener la descripción de todos los lineamientos.
- HTML Validator. Es una herramienta creada por W3C que ayuda a encontrar errores en el código HTML de los sitios web.
- AXE DevTools. Es una extensión de Chrome dirigida a los desarrolladores que permite realizar auditorías de accesibilidad directamente en el entorno de desarrollo.
- Lighthouse. Es una DevTool integrada a Google Chrome que no solo audita la accesibilidad y además evalúa el rendimiento del sitio y el SEO.
- Prueba tu sitio web con lectores de pantalla para entender cómo interactúan los usuarios con discapacidades visuales con tu contenido. Estos son algunos: Para Windows: JAWS , NVDA. Para MacOS: VoiceOver y para Android: Talkback.
- Accessibility Lab MX. Es una organización encargada de impartir talleres sobre accesibilidad web y su sitio contiene información referente a los marcos normativos en México que hablan sobre el derecho de la gente con discapacidad a tener acceso a internet con sitios web inclusivos.
Sin duda la tecnología permite dirigirnos no solo a el consumidor común, sino también facilitar a las personas con discapacidades el mismo acceso a nuestros productos y brindarles la experiencia de compra que los demás tienen.
Por ello es importante planificar un ecommerce donde la accesibilidad sea un elemento fundamental durante su desarrollo. No obstante, si ya cuentas con tu tienda en línea y no conocía sobre las directrices de accesibilidad, espero que las buenas prácticas mencionada en este blog sean de ayuda para que la persona encargada del back-end de tu tienda online pueda irlas implementando poco a poco. Aunque si no cuentas con el personal, nuestros expertos en ecommerce pueden apoyarte. ¡Contáctanos!
