La accesibilidad es un aspecto frecuentemente olvidado tanto en fases de diseño como de desarrollo web. Sin embargo, un sitio accesible nos ayuda a llegar a una mayor audiencia e incluso a conseguir una mejor puntuación en el ranking de Google (es decir que ayuda al posicionamiento orgánico). Por último y no menos importante, un sitio accesible es simplemente más empático y mejora la experiencia de todos nuestros usuarios. Es por ello que a continuación te compartimos 10 recomendaciones para hacer que tu sitio web sea más accesible.
1 – Incluye el atributo de texto alternativo en las imágenes y se descriptivo. Esto ayudará a que los lectores de pantalla no pierdan la información que se encuentra en una imagen. Además, contribuye al posicionamiento orgánico del sitio. Por ejemplo, un buen texto alternativo para la siguiente imagen sería: Mujer en oficina tomando apuntes durante una reunión con un ordenador portátil.
2 – Comprueba que el contraste de color entre figura (textos o íconos) y fondo es correcto. Ciertas combinaciones de colores dificultan la legibilidad de los textos, mientras que otras lo potencian. La WCAG ha establecido estándares que indican si dos colores “pasan la prueba” del contraste. Según los estándares AA:
- Un texto de menos de 16 píxeles debe tener una relación de contraste de 4.5:1
- Un ícono o texto grande o en negrita debe tener un contraste de 3:1
Los estándares AAA son un poco más exigentes, ya que requieren un contraste de 7:1 y 4.5:1 respectivamente. Existen herramientas online que ayudan a medir estos números. En La Magnética usamos Coolors o Who Can Use para analizar de forma detallada diferentes anomalías existentes en torno a la percepción del color.
3 – De la mano de la legibilidad, tenemos los tipos de fuentes y el tamaño de las tipografías. Fuentes como Sans-serif tienen mayor legibilidad para personas con problemas de visión o disléxicas. Por otro lado, depende de la tipografía, no es recomendable usar un tamaño inferior a 16 píxeles para párrafos o bloques de texto grandes.
4- En relación a los textos, existen indicaciones de buenas prácticas en el interlineado y tamaño de párrafo. Para el primero se recomienda una relación de 1,5 veces el tamaño de la fuente, es decir que si tenemos una fuente de 16px, el interlineado debería ser de 24px (o 1.5 líneas). Por otro lado, para facilitar el escaneado se recomiendan párrafos con 700px de ancho (50 y 75 caracteres). Asimismo, los que son muy estrechos dificultan la lectura y causan cansancio visual al lector. Otras recomendaciones indican evitar el uso de mayúsculas y alineaciones centrales en párrafos grandes.
5 – Haz uso de subtítulos y controladores en videos. Es importante que se pueda silenciar, pausar, subir y bajar el volumen de un video que se encuentre en nuestra web, ya que esto ayuda a usuarios con discapacidades cognitivas y a aquellos con conexiones de internet lentas o inestables. De igual manera, la WCAG indica que los usuarios deberían poder pausar carruseles y sliders con autoplay y animaciones que duren más de 3 segundos, para evitar una sobrecarga cognitiva de personas abrumadas ante el movimiento o efectos parpadeantes.
6 – No hagas uso de texto en imágenes, los lectores de pantalla no son capaces de leerlos y además, puede traer problemas de adaptación a tu web en dispositivos móviles. Por otro lado, el mensaje que quieres comunicar con imágenes se puede perder justo en el momento en que el usuario tenga problemas de conexión, ya que estas no se cargarán o lo harán de forma lenta.
7 – El touch target de botones y enlaces clickeables en mobile debería tener un tamaño mínimo de 48 píxeles para Android y 44 píxeles para iOs para que puedan ser clickeados con facilidad por el usuario. Decimos touch targets porque un botón visualmente podría tener menos altura o ancho, siempre y cuando el espacio clickeable respete los tamaños mencionados. Además deberían tener un espaciado mínimo de 8 píxeles entre sí para evitar clicks erróneos.
8- No reemplazar labels con placeholders en formularios. Los labels quedan siempre visibles y ayudan al usuario a recordar la información que deben completar en cada campo. Además se recomienda que estén posicionados sobre el input (y no por ejemplo hacia la izquierda) para facilitar la escaneabilidad del contenido por los usuarios y la lectura en formato “F”.
9- No usar scroll infinito. El scroll infinito es cuando el usuario llega al “final” de una página y se cargan más notas o productos. Normalmente se usa en blogs, periódicos o incluso en algunos ecommerce. Por lo general, no se recomienda ya que este efecto puede abrumar a algunos usuarios y es perjudicial para el posicionamiento orgánico.
10- Se recomienda acompañar íconos con textos siempre que sea posible. En el afán de crear un diseño más minimalista y limpio, los diseñadores suelen utilizar íconos para representar determinada idea o concepto que reemplace textos más largos. Sin embargo, estos pueden dar lugar a más de una interpretación, es decir ser polisémicos (o ser percibidos como tales).
Te dejamos un ejemplo:
En el tercer ícono, algunos usuarios ven una gota de agua, otros una llama, etc. Incluir texto en imágenes y elementos interactuables contribuye a la transmisión del mensaje de forma certera y precisa. Además, lo hace accesible para usuarios invidentes.
Estos son solo algunos ejemplos de lo que podemos hacer para que la world wide web sea un lugar más inclusivo y democrático para todos. Para más información, te compartimos nuestros recursos favoritos para mantenernos informados sobre el tema:
