10 errores comunes de accesibilidad web que están afectando a tu negocio
- David Santos
- 26 may
- 10 min de lectura
La accesibilidad web no es únicamente un tema técnico o una práctica pensada para unos cuantos usuarios. Es un elemento que impacta directamente la experiencia de navegación, el posicionamiento SEO y la capacidad de un sitio para convertir visitantes en clientes.
Me gustaría empezar este artículo dejando claro algo muy importante: no soy ni pretendo ser un experto en diseño. Mi área de expertise es otra, enfocada en publicidad digital, redes sociales y demás. Dicho eso, lo que les voy a platicar en mi artículo es algo tan crucial para el diseño y desarrollo web que hasta alguien que no tiene un perfil de diseñador debe entender su impacto.
Y sí, como pueden verlo en el título, voy a hablar de lo importante que es tener un sitio web que sea accesible.
Tabla de contenidos:
Qué es la accesibilidad web?
Empecemos por lo más básico, qué es la accesibilidad web. La definición más aceptada por la W3C Web Accessibility Initiative dice que:
La accesibilidad web significa que los sitios web, las herramientas y las tecnologías se diseñan y desarrollan de manera que las personas con discapacidad puedan utilizarlos.
Más específicamente, las personas pueden:
percibir, comprender, navegar e interactuar con la Web
contribuir a la Web
La accesibilidad web abarca todas las discapacidades que afectan el acceso a la web, incluidas: auditivo, cognitivo, neurológico, físico, de discurso o visual.
La definición anterior es posiblemente el entendimiento más elemental de lo que este concepto implica. De hecho, la accesibilidad surge a partir de las necesidades de las personas con algún tipo de discapacidad.
Sin embargo, el concepto ha ido evolucionando para englobar otros beneficios. La Web Accessibility Initiative (WAI) menciona que la accesibilidad también beneficia a personas sin discapacidad, mejorando la experiencia de usuario, incluyendo usuarios de dispositivos móviles, smartwatches o personas que están conectados a una red de internet de velocidad lenta.
¿Por qué es importante la accesibilidad web?
Me parece que, como concepto, ya está más claro lo que es la accesibilidad pero en la práctica es más que eso. Es un factor que influye directamente en cómo los visitantes a tu sitio interactúan con la misma y, por lo tanto, impacta en los resultados que obtienes de ella: llenados de formulario, compras de productos, suscripciones a tu newsletter, lo que sea.
Un sitio web accesible permite que más personas puedan explorarlo y completar acciones de manera seamless, sin problemas o fricciones. En otras palabras, visitantes felices por poder navegar un sitio web sin problemas. Esto tiene un impacto favorable en KPIs como la duración promedio de las sesiones, la tasa de rebote y conversiones.
Por otro lado, un sitio web accesible ayuda en el ranking SEO (si no sabes qué es SEO, te recomiendo este artículo donde lo explicamos) de los buscadores como Google. Estructuras claras, contenidos legibles y navegación lógica, no solo ayudan a los usuarios del sitio, sino a que personas “allá afuera” puedan encontrar más fácilmente tu sitio.
Además, y como ya lo platiqué hace un momento, la accesibilidad no es solo para aquellas personas con algún tipo de discapacidad, sino también para usuarios que están navegando tu sitio en condiciones no tan ideales (de nuevo, como las que les platiqué en la sección anterior). Ignorar esto es darte un balazo en el pie porque estás limitando el potencial de tu sitio web.
Al final de cuentas, tu sitio puede tener el mejor contenido del mundo: interesante, entretenido, educativo, etc., pero si las personas no lo pueden consumir de la mejor manera, es como si no tuvieras contenido.
Los errores de accesibilidad más comunes
Por fin, a lo que todos vinieron, les comparto esta lista de errores en torno a la accesibilidad. De nueva cuenta, estas son fallas que la WebAIM ha identificado a partir de análisis de miles de millones de páginas:
Bajo contraste entre el texto y el fondo:
Esto quiere decir que el texto del sitio es difícil de leer porque se están utilizando colores que no generan el suficiente contraste entre sí. Es el error más común (más del 81% de las páginas estudiadas), especialmente porque algunos diseñadores priorizan que se vea “moderno”, “alocado”, “con punch”, o algún otro adjetivo y dejan de lado que las personas podemos sufrir fatiga visual o hasta malestar por intentar leer algo que no es de fácil lectura. Aquí les comparto una herramienta que me gusta mucho utilizar para solucionar este tipo de casos.
Imágenes sin texto alternativo:
El contenido de un sitio no son solo los títulos y párrafos que escribes, sino también los videos e imágenes que los acompañan. Sin embargo, este contenido visual no lo pueden ver todas las personas: ya sea por algún tipo de discapacidad o simplemente porque están conectados a una red muy lenta y no pueden cargar las imágenes correctamente. Cuando esto último sucede, por ejemplo, en lugar de desplegar la imagen se despliega lo que se conoce como Alt Text, o texto alternativo de la imagen, que (en teoría) debe servir para describir correctamente lo que la imagen está mostrando. Los constructores de sitios web como Wix o Wordpress suelen tener campos en los que se puede redactar el texto alternativo. Asegúrate de hacerlo porque a Google también le sirve para comprender mejor tu sitio.
Mala jerarquía de encabezados:
Así como en un documento de Word tenemos un título, subtítulos, encabezados y párrafos, un sitio web también los tiene y normalmente los identificamos con etiquetas HTML como H1, H2, H3, etc. Como regla general, una página de tu sitio solo debe tener un H1. Suele ocurrir que se utilicen múltiples H1 porque se cree que mientras más grande sea el título, será más visible el texto. Y sí, eso puede ser cierto, pero lo que en realidad está ocurriendo es que se complica la navegación y genera confusión porque no entendemos qué texto es más relevante. Además, imagínate que estás visitando el sitio desde un dispositivo móvil con una pantalla pequeña. El saturar de texto que se ve enorme va a terminar cubriendo toda tu pantalla. ¡Jerarquiza correctamente tu contenido!
Formularios mal etiquetados:
Casi el 49% de las páginas de Inicio/Home tienen formularios mal etiquetados. Esto quiere decir que el dueño del sitio tiene la intención que los usuarios llenen una serie de campos para recopilar datos de los mismos (por lo general: Nombre, Correo y algún Mensaje adicional). Sin embargo, si no les dejamos claro lo que queremos de ellos, ¿cómo sabrán los usuarios qué llenar en el formulario? Recuerda, cualquier fricción que los usuarios sientan es una razón más que tienen para abandonar tu sitio y tú estarías perdiendo un usuario, un nuevo suscriptor y/o un cliente potencial. Lo mínimo que podemos hacer es indicarles qué dato va en cada campo y cuáles campos son obligatorios de llenar. Un paso extra es utilizar lo que se conoce como texto placeholder que es una especie de ejemplo que se les deja a los usuarios para decirles: “Mira, en este campo estoy esperando que escribas esto”. Una vez el usuario introduce el primer caracter en el campo, este texto placeholder desaparece, ya que cumplió su función. Les comparto un ejemplo para que quede más claro a lo que me refiero:
Navegación no accesible por teclado:
Este error es quizás más difícil de entender porque normalmente navegamos un sitio web con nuestro mouse de la computadora o con los dedos en una pantalla touch en nuestro celular. Sin embargo, hay usuarios que por X o Y razón necesitan - o prefieren - utilizar las flechas, Enter o Tab, del teclado para llevar a cabo su navegación. Esto es especialmente crítico en elementos de las páginas como los menús desplegables, filtros de búsqueda o los botones de acción. Si el usuario no puede acceder a ellos o queda “atrapado” en algún punto de la navegación, ¡adiós, Nicanor! Afortunadamente, plataformas como Wix Studio y Wordpress incluyen estas características para garantizar que los sitios web sean navegables por teclado, pero nunca está de más hacer una doble verificación para estar seguros.
Ligas y botones sin contexto claro:
Los botones cliqueables son, por excelencia, la mejor opción para mostrar un Call-to-action (llamada a la acción) que esperamos que los usuarios lleven a cabo. Son elementos esenciales dentro de la construcción de un sitio web, pero son dependientes del contexto. Si colocas un botón que dice “Da clic aquí”, sin información adicional alrededor de él, ¿en verdad crees que los usuarios le darán clic? No es solo un tema de desconfianza sino de no entender qué es lo que el sitio espera que los usuarios hagan. Además, los lectores de pantalla - esas herramientas que describen a manera de voz lo que se está mostrando en la pantalla del usuario que utiliza esta funcionalidad- lo único que le dirá al usuario será “Da clic aquí”, sin ningún contexto adicional.
Sitios mal adaptados a móvil:
De acuerdo a StatCounter, más del 53% del tráfico global web ocurre desde dispositivos móviles. Este comportamiento ha sido una realidad en los años recientes: cada vez menos usuarios utilizan sus computadoras para navegar. He ahí la importancia de que el sitio web que diseñes pueda ser no solo visualmente atractivo sino fácilmente navegable en su adaptación a móvil. Algunos elementos que pueden crear una experiencia de usuario deficiente en móvil pueden incluir: textos demasiado pequeños o exageradamente grandes, botones difíciles de presionar, elementos superpuestos entre sí, scrolls horizontales innecesarios, etc. La verdad es que hay muchas plantillas de sitios que se diseñan pensando más en desktop que en móvil. Por lo tanto, hay que asegurarnos de que la experiencia de usuario sea tan buena en móvil como lo es en desktop, para evitar un incremento en la tasa de rebote o disminuyan las conversiones. Más aún si esto es un criterio que buscadores como Google consideran importante para el ranking de SEO.
Uso incorrecto de ARIA:
En HTML, se le conoce como ARIA a un conjunto de atributos especiales para mejorar la accesibilidad de sitios web, y están pensados especialmente para usuarios que utilizan lectores de pantalla. Estos atributos no cambian en sí como se ve un sitio web, sino que sirven de soporte para esta tecnología asistencial diciéndole, por ejemplo: “Este es un ícono para cerrar una ventana emergente”. Por lo general, las plantillas disponibles traen en su HTML nativo un elemento que precisamente cumple la función de ARIA, por lo que en muchos casos no es necesario añadir ARIA al HTML, pero es buena práctica asegurarse de qué está incluido y qué no en una plantilla, si es que estás utilizando una.
Contenido multimedia sin subtítulos o transcripciones:
Hay contenido audiovisual (o sea, videos) que son completamente dependientes del audio. Imagínate un video institucional que hable sobre cómo tu negocio es el mejor y presenta testimonios reales de tus clientes frente a la cámara. El audio es clave para el video. Por lo tanto, es esencial que el mismo incluya subtítulos para aquellos usuarios con una discapacidad auditiva o que no pueden “consumir” el audio porque están en un ambiente que no se los permite (no traen audífonos, están en un lugar ruidoso o en un ambiente que exige silencio, etc.) Los subtítulos aumentan la retención del usuario, mejoran la comprensión del material, apoyan a las tecnologías asistivas y facilitan su consumo. Además, las transcripciones ayudan a indexar el contenido correctamente por los buscadores como Google.
Mensajes de error poco claros o inexistentes:
Entre el 48% y 51% de las páginas analizadas sufren este problema. Piensa en la última vez que intentaste llenar un formulario de contacto, registrarte en una plataforma o finalizar una compra en línea y, de repente, apareció un mensaje genérico como “Ha ocurrido un error” o algunos campos se marcaron en rojo sin mayor explicación. La realidad es que muchos sitios web no comunican correctamente qué salió mal ni cómo resolverlo, lo cual aumenta la fricción y, por lo tanto, la frustración de los usuarios. Esto ocurre muy seguido en formularios donde los campos obligatorios no están claramente identificados, las contraseñas no cumplen ciertos requisitos que nunca se explicaron o los formatos esperados (como teléfonos o correos electrónicos) no son evidentes.
El problema no es únicamente de experiencia de usuario; también afecta directamente la conversión. Cada punto de fricción adicional aumenta las probabilidades de que un usuario abandone un formulario, un checkout o un proceso de registro antes de completarlo. Además, muchos mensajes de error dependen únicamente de elementos visuales como el color rojo, lo cual representa una barrera para personas con dificultades visuales o daltonismo. Un mensaje de error efectivo debe indicar claramente qué ocurrió, por qué ocurrió, en qué campo ocurrió y qué debe hacer el usuario para solucionarlo.
SEO y accesibilidad web, ¿son lo mismo?
Les mencioné casi al inicio de mi artículo que la accesibilidad ayuda en el ranking de SEO de un sitio web. Aún así, pareciera que son lo mismo, ¿no? Si son ávidos lectores de nuestro blog, escuchan nuestro podcast o hemos tenido la fortuna de haberlos tenido como clientes, podrán darse cuenta que muchos de los errores que acabo de enumerar están igualmente ligados con SEO. De hecho, solemos comentarles a nuestros clientes que son accionables a atender si nuestra auditoría SEO así lo indica (y casi siempre es el caso).
La realidad es que estos dos conceptos están estrechamente relacionados porque comparten los mismos objetivos: crear experiencias fáciles y de alta calidad para los usuarios. Muchos de los elementos que Google considera importantes para posicionar un sitio web también están alineados con buenas prácticas de accesibilidad.
Ojo: SEO y accesibilidad no son lo mismo. Existen prácticas enfocadas específicamente en posicionamiento y otras centradas en tecnologías asistivas. Sin embargo, cuando un sitio web está bien construido desde la experiencia del usuario, normalmente ambos conceptos terminan beneficiándose mutuamente.
En otras palabras: un sitio más accesible suele ser también un sitio más fácil de entender, navegar y posicionar.
Referencias:
Sobre el autor
David Santos
Especialista en Marketing Digital en Werko Marketing Solutions. Cuenta con más de 10 años de experiencia en marketing digital. Su enfoque principal es el monitoreo y análisis de data para la gestión y optimización de campañas publicitarias digitales, sitios web y comercios en línea.
¡Suscríbete a Marketing Insights!
Y recibe directamente a tu correo un newsletter quincenal para que seas de las primeras personas en recibir nuestros artículos:
Escucha nuestro Podcast:
Cierre de Semana
Actualizaciones de negocios todos los viernes, para que hagas que el fin de semana también cuente.
