Mejores prácticas para la accesibilidad de tu web
La accesibilidad web es fundamental por varias razones, que abarcan desde la ética hasta las ventajas prácticas para los negocios y la sociedad en general.
En muchos paises existen leyes que obligan a que las páginas web sean accesibles. Apróximadamente el 15% de la población tiene algún tipo de discapacidad, por lo que es una obligación ética y moral para diseñadores y desarrolladores implementar sistemas que permitan a cualquier persona poder entender el contenido de nuestras webs.
Además de eso, una buena accesibilidad en nuestra web nos va a permitir ofrecer una mejor experiencia de usuario, una mejor consideración por parte de los motores de búsqueda y conseguir abarcar más audiencia.
Veamos algunos aspectos que hay que tener en cuenta para poder ofrecer una accesibilidad impecable en nuestras webs.
Temas
1. Texto alternativo para las imágenes
Las imágenes en una web tienen una etiqueta alt que describa brevemente la imagen. Es importante que rellenes la etiqueta con información precisa. Si la imagen no se llegara a cargar en el navegador, se mostraría la etiqueta alt. Y mas importante aún, los lectores de pantalla que utilizan las personas con problemas de visión leerán el contenido de las etiquetas alt permitiendo que los usuarios sepan que se muestra en la imagen.
2. Contraste de colores
Debemos asegurarnos que haya suficiente contraste entre el texto y el fondo. Si los colores tienen un tono parecido, aunque a simple vista se distingan bien, no todas las personas tienen la misma visión que nosotros. Debemos ponernos siempre en el lugar de los usuarios y no mirar la web solamente desde nuestra perspectiva.
Tu web debe tener el contraste de colores de tal forma que se pueda leer bien en diferentes situaciones: personas con visión reducida, condiciones de baja iluminación, pantallas de poco tamaño o baja calidad…
Tienes varias herramientas para comprobar el contraste de colores, como el analizador de contraste de WebAIM.
3. Uso adecuado de las etiquetas HTML
Las etiquetas HTML no solo sirven para «pintar» de una manera u otra la web en el navegador. También sirven para mejorar la experiencia del usuario y para que las tecnologías de asistencia entiendan como navegar por nuestras webs.
Etiquetas como como <header>, <nav>, <main>, <section>, <article>, <footer>, etc… son muy importantes para que se entienda correctamente la estructura semántica de una web. Utilízalas adecuadamente y evita que un usuario salga rebotado de tu web incapaz de comprender como puede navegar por ella.
Otras etiquetas importantes en este sentido son las de los encabezados, <h1> a <h6>. Si organizas tu contenido jerárquicamente con el uso correcto de las etiquetas de encabezados, conseguiras que lectores de pantalla y personas con discapacidades cognitivas puedan entender bien la estructura de tu contenido.
Si creas listas en tu web, utiliza las etiquetas <ul> <ol> y <li> para permitir identificar que ese contenido son listas y elementos de listas.
4. Navegación con teclado
Todas las funciones de tu sitio deben ser accesibles mediante el teclado. Esto es crucial para usuarios que no pueden utilizar un ratón. Asegúrate de que los elementos interactivos como enlaces, botones y formularios sean accesibles y puedan ser activados con el teclado.
5. Formularios accesibles
Los formularios deben ser claros y fáciles de usar. Utilizar las etiquetas <label> con campos de formulario <input>, <select> o <textarea> mejora la accesibilidad, ya que los lectores de pantalla leen las etiquetas en voz alta, explicando al usuario qué información hay que introducir en cada campo.
Utiliza <fieldset> y <legend> para agrupar campos relacionados y proporcionar descripciones para esos grupos mejora la comprensión y la accesibilidad de los formularios mas complejos.
6. Haz que el contenido multimedia sea accesible
Si vas a utilizar videos, una buena práctica es crear subtítulos que puedan ser leídos por los diferentes sistemas que ayudan a personas con discapacidad.
Si vas a poner audios, añadir transcripciones ayudará a las personas con discapacidades auditivas.
Estas prácticas también son útiles para aquellos usuarios que prefieren leer texto a escuchar audios o videos.
7. Diseño responsivo
Aquí no descubrimos la sopa de ajo. Es obvio y sabes de sobra que debes asegurarte que el diseño de tu web se adapta a los diferentes tamaños pantallas y pueda ser perfectamente leída en ordenadores y en dispositivos móviles.
8. Evaluación continua
La accesibilidad no es algo que se hace una sola vez. Haz evaluaciones periódicas utilizando herramientas como WAVE o Axe para identificar y corregir problemas de accesibilidad. Google PageSpeed Insights también puede ayudarte a detectar problemas de accesibilidad.
Estas son algunas buenas prácticas para mejorar la accesibilidad de tu web. No lo tomes como una guía cerrada, intenta aplicar la lógica común de todos los puntos de la lista para aplicarla a todos los aspectos de tu página web. Si lo consigues, habrás interiorizado algo muy importante.