Mejorar la accesibilidad de tu sitio es más fácil de lo que crees, sólo necesitas poner un poquito de cuidado en un par de detalles. Con estos 5 consejos mejoraras mucho cómo otras personas visitan tu sitio web.

5 + 1 acciones para hacer tu sitio accesible

Cualquier pequeña mejora en accesibilidad va a resultar en que muchos más usuarios van a poder disfrutar de tu sitio por lo que te proponemos estas 6 acciones para conseguir que tu sitio se más accesible.

1 Usa etiquetas para referenciar tus campos en los formularios

Los formularios web siempre tienen que tener un campo label por cada campo input que haya. Es decir, que por cada campo de tu formulario tienes que tener una etiqueta indicando qué tiene que rellenar el usuario en ese campo. Además, estas etiquetas tienen que estar relacionadas con su campo usando el atributo for en donde se indica el valor del atributo name del formulario. Vamos que tiene que quedar algo así:

<label for="nombre">Nombre:</label>
<input name="nombre" type="text" />

Si tuvieras que ocultar la etiqueta, en lugar de eliminarla del código, utiliza CSS para hacerla desaparecer en pantalla ¡Pero ojo! No utilices la propiedad display: none porque entonces no servirá de nada.

2 Vigila el contraste de colores

Os hemos hablado en otros episodios sobre la importancia del contraste de colores y no me voy a cansar de repetirlo porque es de los puntos más fáciles de corregir y de comprobar.

Además los problemas que da el contraste pueden afectar a muchas más personas porque dependen mucho de la iluminación que tenga el visitante del sitio en su entorno. Por ejemplo, consultar una web a pleno sol en Andalucía puede ser misión imposible a poco que no tengas un buen contraste ;)

3 Además del color usa otras propiedades para mostra diferencias:

Un error también común y con una solución sencilla es sólo utilizar el color para mostrar cambios o diferentes estados. Por ejemplo para mostrar que algo está bien lo pintamos en verde y para mostrar que está mal lo pintamos en rojo. Esto ocasiona que las personas que no pueden apreciar los colores como tú, tengan dificultades para ver estas diferencias. Algunos consejos rápidos:

1. Haz que los enlaces en tu sitio estén subrayados. Yo era un poco excéptico con esto cuando vino Vicent a hablarnos de accesibilidad pero realmente en su artículo sobre enlaces y subrayados me convenció.
2. Además de recuadrar en rojo los campos no válidos de un formulario, añade un mensaje de error al lado de cada campo ¡Esto además te lo agradecerán todos tus visitantes!
3. Muestra los mensajes al usuario indicando primero el tipo de mensaje. Es muy común ver sólo un mensaje de error en un recuadro rojo cuando algo va mal, pero si no indicas que es un error puede que nadie identifique que algo fue mal.

4 Utiliza HTML semántico

Esta norma es básica. Si crees que en la vida sólo hay <div> y <span>, tienes que darte un vuelta por los últimos estándares de HTML5. El caso es que si empleas las etiquetas HTML adecuadas, conseguirás que tus sitios sean mucho más accesibles (por lo general habrás conseguido el nivel WCAG A sin esfuerzo) y además mejorarás el SEO de tu sitio porque a Google le costará mucho menos entenderlo.

5 Usa la etiqueta ALT para describir tus imágenes. SIEMPRE.

¡Estabas esperando esta sugerencia! Somos muy pesados con esto, pero es que realmente ¡Es tan fácil de cumplir y cuesta tan poco! Y mejora mucho la accesibilidad de tu sitio. Además en este sentido la norma es muy clara: Todas las imágenes de un sitio deben tener una etiqueta ALT describiendo su contenido. La única excepción sería aquellas imágenes que sean exclusivamente decorativas sin aportar nada a la página (un ribete por aquí, una columna por allá...) y en ese caso la imagen tiene que tener una etiqueta ALT vacía. Pero seamos sinceros ¿cuántas imágenes decorativas tienes en tu sitio incluidas en el HTML? Es más, si la imagen es decorativa ¿te merece la pena incluirla en el sitio?

Y por último (+1): Prueba por ti mismo la accesibilidad

Posiblemente no puedes hacer tú mismo una auditoría de accesibilidad completa de tu sitio, pero para que sea un poco mejor no te hace falta. Simplemente intenta comprobar por ti mismo cómo se experimenta tu sitio de formas diferentes.

• Usa complementos de navegador que te permitan visitar tu sitio con diferentes afecciones cromáticas. En este enlace tienes unos cuantos: https://www.makeuseof.com/tag/3-easytouse-online-colorblindness-simulators/
• Prueba a navegar tu sitio usando exclusivamente el teclado
• Escucha a tu sitio. Hay extensiones de navegador como Screen Reader (antiguo ChromeVox) que te permiten navegar escuchando tu sitio. Si cuando las usas empiezas a escuchar cosas sin sentido, posiblemente puedas mejorar muchas cosas ;).

En Joomla 4 tenemos de serie un comprobador de accesibilidad y herramientas para mejorar la accesibilidad del sitio de forma personalizada a cada usuario. ¡No te pierdas nuestro próximo meetup sobre el uso del comprobador de accesibilidad de Joomla (joally para los amigos)!

Aquí tienes el proyecto donde trabajamos en el comprobador de accesibilidad: https://joomla-projects.github.io/joomla-a11y-checker/index.html

Episodios relacionados

• #18 - Cómo hacer un sitio más accesible
• #88 - Accesibilidad web
• #95 - La importancia del contraste

---

¿conocías estos consejos? ¿Qué más haces para mejorar la accesibilidad de tu sitio? !Déjanos un comentario!

• Anterior
• Siguiente