3 herramientas y 4 trucos para iniciarte en la accesibilidad web.

Azahara Fernández Guizán

Jun 6, 2020·2 min read

Desde Afaya, tanto Juan Manuel Rodriguez Perez como yo, nos preocupamos por la inclusividad y la accesibilidad. Es por ello que siempre estamos tratando de mejorar nuestros desarrollos, e ir haciéndolos más accesibles (ahora mismo estamos retocando nuestra web personal).

Si, como en nuestro caso, no tienes mucho conocimiento de accesibilidad y te gustaría mejorar tu web personal o aplicación web, aquí te dejamos unos recursos que nos encantan y unos consejos.

Accesibilidad web

Para evaluar la accesibilidad web general nos pareció muy útil Web Accesibility. Esta herramienta es similar a las que evalúan el rendimiento web y permite simplemente introduciendo una url comprobar el porcentaje de conformidad con los estándares WCAG. Nuestro objetivo, estar por encima del 85%.

Contraste de colores

A la hora de decidir la paleta de colores, tuvimos cuidado en elegir un contraste adecuado. Con esta medida no sólo beneficiamos a las personas que tienen problemas en diferenciar contrastes, sino a cualquier persona usuaria en una situación de alta luminosidad.

Para comprobarlo usamos la herramienta Color Contrast Accesibility Validator, que de nuevo es muy intuitiva y rápida.

Evaluar riesgos y errores

Para ayudarnos en el desarrollo estamos usando una extensión de Chrome y Firefox llamada a11y.css, la cual es muy útil porque va mostrando los diferentes errores y vulnerabilidades de nuestra web. Te dice además aquello que tienes que cambiar, consiguiendo que mejores enormemente la accesibilidad con pequeños cambios (por ejemplo añadirle el atributo type a un button).

Trucos

Los que nos funcionan son:

1. Prueba a navegar con tabs, es indispensable para muchas personas. Con ello podemos ver si se puede, y si el flujo es el adecuado.
2. Ponle siempre descripciones a las imágenes. Nosotros ahora mismo estamos aumentando las nuestras para que sean mas descriptivas y den una mayor visibilidad a todos los usuarios.
3. Trata de mostrar el contenido como html, no como imágenes para que todo el mundo pueda acceder a él. Si cargamos una imagen como único contenido, aquellas personas que no puedan ver la pantalla se quedan sin ningún tipo de interacción.
4. Dale una vuelta a las especificaciones, que son muy simples y son pequeños detalles a tener en cuenta que no cuesta hacer: https://lnkd.in/eq6r8Va

— — — — — —

Espero que esta publicación te haya sido útil. Si es así, por favor, dale un voto positivo y compártelo en tus redes sociales. Si lo deseas, puedes encontrarme en Twitter y en Linkedin.