Accesibilidad para tiendas en línea: Vendiendo a todo el mundo

Imagina un comprador que quiere comprarte esta noche. Tiene una tarjeta en la mano y una razón para gastar. Pero usa un lector de pantalla porque es ciego, y tu botón "Añadir al carrito" es solo un icono sin etiqueta. El lector de pantalla anuncia "botón, botón, botón" y nada más. Tienen el dinero, la intención y la paciencia hasta el momento en que tu tienda no les ofrece nada. Luego se van y compran en una tienda que simplemente funcionó.

Esa pérdida silenciosa e invisible ocurre con mucha más frecuencia de lo que la mayoría de los dueños de tiendas creen. La accesibilidad no es una preocupación de nicho para una minoría diminuta. Una gran parte de la población vive con algún tipo de discapacidad, y casi todos experimentan barreras temporales o situacionales, como entrecerrar los ojos al mirar un teléfono bajo la luz del sol o comprar con una sola mano mientras se sostiene a un niño. Este artículo explica, en un lenguaje sencillo, lo que realmente significa la accesibilidad web para una tienda online, por qué afecta silenciosamente tus ingresos y los cambios prácticos que marcan la mayor diferencia, ninguno de los cuales requiere que seas desarrollador.

Qué significa realmente "accesible"

Accesibilidad significa que tu tienda puede ser utilizada por personas, independientemente de cómo vean, oigan, se muevan o procesen la información. Algunas personas navegan con un teclado en lugar de un ratón. Otras usan un lector de pantalla que lee la página en voz alta. Algunas tienen baja visión y amplían el texto al doble de su tamaño normal. Otras tienen un control motor fino limitado y tienen dificultades con los pequeños objetivos de toque. Algunas tienen dislexia y encuentran el texto denso y de bajo contraste agotador. Una tienda accesible los acomoda a todos sin obligar a nadie a una "versión accesible" separada y simplificada.

El manual de normas ampliamente aceptado para esto es un conjunto de directrices conocidas como WCAG, las Pautas de Accesibilidad al Contenido Web, publicadas por el organismo internacional que rige los estándares web. No necesitas memorizarlas. Se reducen a cuatro ideas sensatas: el contenido debe ser perceptible (las personas pueden asimilarlo), operable (las personas pueden usar los controles), comprensible (las personas pueden seguir lo que sucede) y robusto (funciona con tecnología de asistencia). Ten en cuenta esas cuatro palabras y la mayoría de las decisiones se volverán obvias.

Por qué es un problema empresarial, no un proyecto de caridad

Es tentador clasificar la accesibilidad como "algo bueno de tener". Eso es un error solo por los números. La comunidad de personas con discapacidad y sus familias controlan una enorme cantidad de poder adquisitivo en todo el mundo. Excluirlos no es un error de redondeo; es un mercado del tamaño de un gran país al que has cerrado la puerta principal. Y las mismas soluciones que ayudan a los compradores con discapacidad ayudan a todos: botones más claros, navegación con teclado más rápida y texto legible reducen la fricción para todos los visitantes, que es exactamente lo que la buena optimización del proceso de compra pretende hacer de todos modos.

El puñado de soluciones que más importan

Podrías pasar un año perfeccionando la accesibilidad, pero un pequeño conjunto de cambios ofrece la mayor parte del beneficio. Empieza por aquí.

1. Escribe texto alternativo real para las imágenes de los productos

El texto alternativo es una breve descripción escrita adjunta a una imagen. Los lectores de pantalla lo leen en voz alta, y los motores de búsqueda también lo usan. Si las fotos de tus productos no tienen texto alternativo, un comprador ciego no tiene idea de lo que está viendo. "Imagen" o "IMG_4821.jpg" es inútil. "Abrigo de lana azul marino con botones de latón, visto de frente" es útil. Describe lo que importa para la decisión de compra, no cada píxel. Esta es una de las raras mejoras que ayuda a los usuarios con discapacidad y a tu clasificación en los motores de búsqueda al mismo tiempo.

2. Haz que todo funcione con un teclado

Muchas personas no pueden usar un ratón. Presionan la tecla Tab para moverse entre enlaces y botones, y Enter o Espacio para activarlos. Abre tu tienda y trata de comprar algo usando solo tu teclado. Si no puedes alcanzar el botón "Añadir al carrito", no puedes abrir el menú o no puedes ver qué elemento está seleccionado actualmente, tampoco podrá un usuario de teclado. Un contorno de enfoque visible, el pequeño anillo que muestra dónde estás, es esencial. Algunos temas lo ocultan para que se vea "más limpio". No lo hagas.

3. Revisa el contraste de color

Un texto gris claro sobre un fondo blanco se ve elegante para un diseñador y es invisible para alguien con baja visión o para cualquiera que esté al aire libre en un día soleado. El texto necesita suficiente contraste con su fondo para ser legible. Las herramientas gratuitas te permiten pegar dos colores y te dicen al instante si cumplen. Esta única solución a menudo mejora la conversión en general, porque un texto difícil de leer te cuesta ventas silenciosamente de personas que nunca se describirían a sí mismas como discapacitadas.

4. Etiqueta tus formularios y botones claramente

Cada campo de formulario necesita una etiqueta visible que se mantenga en su lugar, no solo un texto de marcador de posición que desaparece en el momento en que alguien comienza a escribir. Cada botón necesita palabras que un lector de pantalla pueda anunciar. Un botón de carrito solo con un icono aún debe llevar una etiqueta de texto oculta como "Ver carrito". Estos pequeños detalles son la diferencia entre un proceso de compra que funciona para todos y uno que excluye silenciosamente a una parte de tus clientes.

La accesibilidad y la confianza van de la mano

Una tienda que cuida los pequeños detalles tiende a ser una tienda en la que la gente confía. Cuando tus botones son claros, tu texto es legible y tu proceso de pago se comporta de manera predecible, los compradores se relajan. Esa sensación de competencia está estrechamente relacionada con el trabajo de construir señales de confianza en tu tienda. Una interfaz descuidada y difícil de usar señala lo contrario, y los compradores primerizos se alejan rápidamente de cualquier cosa que parezca poco confiable.

La misma lógica se aplica a tu trabajo de conversión en general. Muchas de las cosas que elevan una buena tasa de conversión son victorias de accesibilidad disfrazadas: llamadas a la acción más claras, menos desorden, rutas de compra más rápidas. Si realizas experimentos en tu tienda, incorpora las comprobaciones de accesibilidad en tu proceso de pruebas A/B para que una variante "ganadora" nunca gane excluyendo silenciosamente a personas.

El móvil hace que la accesibilidad sea innegociable

La mayoría de las compras se realizan ahora en teléfonos, y el teléfono amplifica todos los fallos de accesibilidad. Las pantallas pequeñas hacen que el bajo contraste sea más difícil de leer. Los dedos grandes hacen que los objetivos de toque diminutos sean una pesadilla. El uso con una sola mano, caminar, la poca iluminación y las conexiones inestables son discapacidades situacionales que afectan a personas sin ninguna discapacidad permanente. Diseñar para la persona que necesita la mayor ayuda generalmente produce una experiencia más fluida para todos, por lo que la accesibilidad y la optimización móvil van en la misma dirección.

No dependas de widgets superpuestos para que lo hagan por ti

Es posible que hayas visto widgets de "accesibilidad" emergentes que prometen el cumplimiento instantáneo con una línea de código. Ten cuidado. Los expertos en accesibilidad y muchos usuarios con discapacidad son muy críticos con estas superposiciones, que a menudo no solucionan los problemas subyacentes y a veces empeoran las experiencias de los lectores de pantalla. No hay un botón mágico. La accesibilidad real proviene de construir la página correctamente, no de atornillar un widget encima de una rota.

El aspecto legal, brevemente

Más allá del aspecto moral y comercial, existe un creciente argumento legal. En muchas regiones, los tribunales y los reguladores tratan cada vez más las tiendas en línea inaccesibles de la misma manera que tratarían una tienda física sin rampa. Las demandas y quejas por sitios web inaccesibles han aumentado drásticamente en los últimos años. No es necesario que te conviertas en un experto legal, pero debes saber que ignorar la accesibilidad es un riesgo que se agrava con el tiempo. Integrarla desde el principio es mucho más barato que adaptarla bajo presión.

Cómo empezar sin sentirse abrumado

No tienes que arreglar todo a la vez. Empieza con la ruta que genera dinero: página de inicio, una página de categoría clave, una página de producto, el carrito y el proceso de pago. Recorre esa ruta solo con un teclado. Luego, activa el lector de pantalla incorporado en tu teléfono u ordenador y haz el mismo recorrido escuchando, no mirando. Encontrarás los peores problemas en cuestión de minutos. Arregla esos primero. Luego, ejecuta un comprobador automático gratuito para detectar problemas de contraste y etiquetado a gran escala.

A partir de ahí, haz de la accesibilidad parte de tu forma de trabajar en lugar de un proyecto único. Cada vez que añadas un producto, escribe un texto alternativo adecuado. Cada vez que ajustes un color, comprueba el contraste. Cada vez que añadas una nueva función, pruébala con un teclado. Tratado como un hábito, cuesta casi nada y amplía constantemente tu audiencia. Si necesitas ayuda para auditar tu tienda o integrar la accesibilidad en un rediseño, siempre puedes ponerte en contacto para hablarlo. Para una introducción técnica más profunda, esta guía complementaria sobre los principios básicos de la accesibilidad web cubre los principios subyacentes con más detalle.

La conclusión es simple. La accesibilidad no es un impuesto para tu negocio; es una forma de dejar de rechazar a clientes dispuestos. Se superpone casi por completo con el buen diseño, el buen rendimiento y una buena conversión. Hazlo no porque alguien te obligue, sino porque cada comprador que atiendes es una venta más que de otro modo habrías perdido a una tienda que sí hizo el esfuerzo.

Preguntas frecuentes

Referencias

1. Organización Mundial de la Salud. "Discapacidad." who.int.
2. Iniciativa de Accesibilidad Web del W3C. "WCAG 2 Overview." w3.org.
3. WebAIM. "The WebAIM Million Annual Accessibility Report." webaim.org.