Cómo mejorar la accesibilidad de tu sitio web

Pepe visita tu sitio web tras ver un anuncio e interesarse por uno de tus productos. Ve un vídeo en tu página de inicio y hace clic en él. Pero el vídeo tiene un problema: Pepe tiene problemas de audición, y tu vídeo no tiene subtítulos.

Si tu sitio web no sigue las directrices establecidas para personas con discapacidad, te arriesgas a que gente como Pepe abandonen tu sitio. O peor aún, que interpongan una demanda por la inaccesibilidad de tu sitio web.

Este artículo está hecho en base a la ADA, the Americans with Disabilities Act que es la más completa pero puede servir de ejemplo para la normativa europea o española.

Pero antes de que cunda el pánico, echa un vistazo a nuestra lista de comprobación del cumplimiento de la ADA en 2023 y revisa las once características imprescindibles para garantizar que tu sitio web sea accesible. Sigue leyendo para saber más.

Si quieres más consejos y trucos útiles para ofrecer la mejor experiencia al usuario, suscríbete a nuestro boletín de noticias por correo electrónico.

Qué significa ser conforme a la ADA

Cuando escuchas “conforme a la ADA”, ¿qué significa?

El cumplimiento de la ADA se basa en la Ley de Estadounidenses con Discapacidades (ADA), que establece que todos los espacios públicos deben ser accesibles para las personas con discapacidad. Significa que tanto si alguien tiene una discapacidad visual, física o de otro tipo, necesita adaptaciones para acceder al mismo espacio.

Estas adaptaciones se extienden a Internet, ya que Internet se considera un espacio público. En consecuencia, tienes que crear un sitio web que permita a las personas con distintas discapacidades acceder fácilmente a tu sitio web.

El incumplimiento de la normativa ADA tiene numerosas ramificaciones, desde la pérdida de clientes hasta problemas legales.

Para asegurarte de que tu sitio web cumple la ADA, consulta nuestra lista de comprobación de cumplimiento de la ADA para saber cómo hacer que tu sitio web sea accesible para todos.

Aquí tienes un rápido desglose de lo que veremos:

• Sigue las WCAG
• Añadir texto alternativo a las imágenes
• Añadir subtítulos al contenido de vídeo
• Eliminar los elementos que parpadean rápidamente
• Elimina las etiquetas de encabezado vacías
• Ten en cuenta el contraste de colores
• Añade notificaciones a los límites de tiempo
• Organiza tu sitio web de forma lógica
• Haz que tu sitio web sea navegable con teclado
• Utiliza los tipos de letra adecuados
• Utiliza etiquetas ARIA

Pautas de Accesibilidad al Contenido en la Web (WCAG)

Lo primero en esta lista de comprobación de cumplimiento de la ADA para sitios web es seguir las pautas de accesibilidad al contenido web (WCAG). Las WCAG establecen directrices que permiten a las empresas crear contenidos web más accesibles. Seguir estas directrices es un buen punto de partida para ofrecer un sitio web positivo y funcional.

Hay cuatro elementos básicos de las WCAG:

Perceptibilidad: ¿Es fácil percibir la información de tu sitio web? Si es difícil ver información en tu sitio web o ver una disposición clara de la información, tienes que adaptar tu sitio web para presentar la información con claridad.

Operable: ¿Es tu sitio web fácil de usar y funcional para la gente? Si tu sitio web tiene un diseño confuso o una navegación difícil de usar, no se ajustará a las directrices WCAG. Tendrás que reoptimizar tu sitio web para asegurarte de que a la gente le resulta fácil encontrar la información.

Comprensible: ¿Es la interfaz de tu sitio web fácil de entender? Si tu navegación es complicada o tienes que dar varios pasos para completar una tarea, podría acabar siendo demasiado difícil de entender. Debes hacer que los procesos del sitio web sean sencillos y fáciles de seguir.

Robusto: ¿Se adapta tu sitio web a todos los navegadores y programas de asistencia? Si quieres que tu sitio web cumpla la ADA, tienes que asegurarte de que es compatible con programas de asistencia, como los lectores de pantalla.

Si sigues las directrices WCAG, pondrás tu sitio web en la vía rápida para ser compatible con la ADA.

Añade texto alternativo a las imágenes

Lo siguiente en nuestra lista de comprobación del cumplimiento de la ADA es añadir texto alternativo a las imágenes. El texto alternativo de la imagen es el texto que añades a la parte posterior de tus imágenes y que describe lo que hay en la foto. Este texto es fundamental para todos los usuarios.

Si una imagen no se carga en tu sitio web, aparecerá en su lugar el texto alternativo. Este texto alternativo ayuda a decir a los usuarios qué era la imagen, para que puedan ver cómo se aplica al contexto de la página.

Para los usuarios con discapacidad, el texto alternativo es fundamental para entender lo que hay en tu sitio web. Si alguien tiene una discapacidad visual, no puede ver las imágenes de tu sitio web. El texto alternativo les proporciona el contexto necesario para comprender los elementos visuales de tu sitio web.

Cuando añadas texto alternativo a tus imágenes, asegúrate de que describe lo que hay en la imagen. Aquí tienes algunos consejos útiles para añadir texto alternativo a tus imágenes:

Utiliza tu palabra clave objetivo si es relevante, pero no llenes tus etiquetas con demasiadas palabras clave. No lo simplifiques demasiado: di “gorra” en lugar de “gorra de béisbol roja sobre una mesa negra”.

No utilices la frase “imagen de” para describir tu foto.

Añade subtítulos a los contenidos de vídeo

El siguiente elemento que debes tachar de tu lista de verificación de cumplimiento de la ADA para 2023 es añadir subtítulos a tus contenidos de vídeo. Los subtítulos son una forma estupenda de hacer que los vídeos de tu sitio web sean accesibles para las personas con discapacidad.

Activar los subtítulos en tus vídeos permite a las personas con problemas de audición interactuar con el contenido de tus vídeos sin problemas. Es una forma estupenda de hacer que tu contenido sea digerible y accesible para todos.

No utilices elementos que parpadeen rápidamente

Cuando diseñas tu sitio web, buscas una forma de hacer que tu empresa destaque sobre la competencia. Puede que intentes añadir un toque de estilo, como una ventana emergente parpadeante, para que tu sitio web destaque. Aunque puede ser divertido darle vida a tu sitio web, no es conforme a la ADA.

Para cumplir las normas de la ADA, deberás eliminar cualquier elemento que parpadee rápidamente o cambie de color. Estos elementos pueden ser perjudiciales para los visitantes epilépticos, así que es mejor eliminarlos por completo.

Elimina las etiquetas de encabezado vacías

Lo siguiente en esta lista de comprobación de cumplimiento de la ADA es eliminar las etiquetas de encabezado vacías. Las etiquetas de encabezado desempeñan un papel fundamental a la hora de ayudar a los usuarios a comprender la estructura de una página. Crean una jerarquía de información para ayudar a los usuarios a entender cómo está organizada la información en tu página.

Entonces, ¿por qué importa que las etiquetas de encabezado estén vacías?

Los lectores con deficiencias visuales no pueden hojear tu contenido y hacerse una idea de la estructura. Alguien que no tenga problemas de visión no verá la etiqueta de encabezamiento vacía, sólo será un espacio vacío. La experiencia no es la misma para un lector con discapacidad visual.

Como un lector con discapacidad visual depende de los lectores de pantalla, oirá que el programa dice que hay una cabecera presente, pero no leerá lo que es porque está vacía. Como resultado, el lector se sentirá confuso porque no entenderá la organización de la página debido al encabezado vacío.

Para asegurarte de que creas una experiencia igual para todos, elimina las etiquetas de encabezado vacías o añádeles texto (cuando proceda).

Ten en cuenta el contraste de colores

Otro elemento que debes tachar de la lista de comprobación de conformidad con la ADA de tu sitio web es comprobar el contraste de colores. Aunque el contraste de colores no parezca gran cosa, afecta a las personas con discapacidad.

Para las personas con problemas de visión o daltónicas, determinados contrastes de color pueden resultar difíciles de ver o incluso dolorosos. Por ejemplo, alguien con daltonismo protestante (no puede ver el rojo) vería tu sitio web rojo y amarillo como un solo color.

Entonces, ¿significa eso que tienes que cambiar todo tu sitio web y la combinación de colores? No. Significa que tienes que prestar más atención a los contrastes de color y a cómo separas los colores en tu sitio web. Puedes hacer algo sencillo como utilizar el blanco para romper los colores y crear contraste.

Además, debes pensar en cómo utilizas el color para definir los elementos de tu sitio web.

Así, por ejemplo, si tienes un artículo sobre lo que se debe y lo que no se debe hacer y utilizas el rojo y el verde para significar lo que está bien y lo que está mal, quizá quieras replanteártelo. Tal vez quieras añadir símbolos como marcas de verificación y equis para definir lo que está bien y lo que está mal, en lugar de basarte únicamente en el color.

Añade una notificación a tus límites de tiempo

Otro elemento que debes añadir a la lista de comprobación de conformidad con la ADA de tu sitio web es añadir notificaciones a cualquier límite de tiempo de tu sitio web. Ya sea para reclamar una oferta o para completar la compra, puedes poner límites de tiempo en los procesos de tu sitio web para animar a la gente a completar las acciones más rápidamente.

Si pones en práctica esta estrategia, tienes que hacerla accesible para quienes visiten tu sitio web. Querrás asegurarte de añadir notificaciones para cuando se esté acabando el tiempo, de modo que quienes utilicen lectores de pantalla reciban una notificación de que se les está acabando el tiempo.

Organiza tu sitio web de forma lógica

Otro elemento que debes añadir a tu lista de comprobación del cumplimiento de la ADA es organizar tu sitio web de forma lógica. Este consejo puede parecer obvio, pero tiene un impacto significativo a la hora de ayudar a las personas con discapacidad a navegar y comprender lo que hay en tu sitio web.

Para cualquier usuario de tu sitio web, debes asegurarte de que pueda navegar fácilmente por él y encontrar la información que necesita. Eso significa crear una navegación organizada y una estructura de páginas lógica para tu público.

Cuando crees tu navegación, asegúrate de organizarla de forma que a la gente le resulte fácil navegar. Crea categorías y subcategorías para ayudar a que tu navegación tenga estructura.

Cuando crees páginas en tu sitio web, asegúrate de tener una jerarquía lógica de la información. Utiliza H1, H2, etc. para ayudar a organizar tu información. Esto facilita el seguimiento de tu contenido a las personas que utilizan lectores de pantalla.

Asegúrate de que tu sitio web es navegable con un teclado

Lo siguiente en nuestra lista de comprobación para el cumplimiento de la ADA es asegurarte de que tu sitio web es navegable con un teclado. Muchas personas con deficiencias auditivas y visuales y problemas de movilidad confían en sus teclados para navegar por los sitios web en lugar de en un ratón.

Para ofrecer la misma experiencia de calidad, debes asegurarte de que las personas puedan navegar fácilmente por tu sitio web utilizando un teclado.

Puedes probar la funcionalidad de tu teclado visitando tu sitio web y utilizando las siguientes teclas para desplazarte:

• Flechas arriba y abajo
• Tabulador
• Mayúsculas + Tabulador
• Espacio
• Intro

Si puedes acceder fácilmente a los distintos elementos de tu sitio web utilizando estas teclas, ¡entonces tu sitio web está listo! Si no, tendrás que hacer ajustes para que sea más amigable con el teclado.

Utiliza las fuentes adecuadas

Otro elemento que debes añadir a tu lista de comprobación para el cumplimiento de la ADA es utilizar los tipos de letra adecuados. Este consejo se aplica a algo más que a la ADA: tener el tipo de letra adecuado puede hacer que tu sitio web sea bueno o malo.

No debes utilizar fuentes difíciles de leer. Algunos visitantes con deficiencias visuales aún pueden leer la información de los sitios web, pero sólo necesitan que la fuente sea más grande. Si tu fuente es demasiado extravagante, esos usuarios tendrán dificultades para leer tus páginas.

En general, deberás abstenerte de utilizar cualquier opción de fuente “extravagante” que veas o fuentes cursivas (utiliza las cursivas con moderación). Utiliza fuentes que sean claras y fáciles de leer para los usuarios.

Utiliza etiquetas ARIA

Lo último en esta lista de comprobación del cumplimiento de la ADA es utilizar Aplicaciones de Internet Ricas Accesibles (ARIA). Las etiquetas ARIA ayudan a las personas con discapacidad a comprender los distintos elementos de tu sitio web.

Por ejemplo, si tienes un cuadro emergente con una X en la esquina para cerrarlo, es posible que una persona con discapacidad no entienda qué significa esa X. Las etiquetas ARIA te permiten añadir contexto a la función, para que las personas puedan entender lo que significa esa etiqueta y utilizar tu sitio web sin problemas.

Piensa en las etiquetas ARIA como un etiquetado de elementos no etiquetados, como símbolos. Ayudan a proporcionar más contexto para que tu sitio web sea más fácil de navegar y utilizar.