Ejemplos de accesibilidad web
El contexto
La primera vez que me dijeron que el proyecto web en el que estaba trabajando debía tener un nivel de adecuación AA o AAA por imperativo legal sentí miedo.
Corría el año 2013 y hacía poco que había empezado a trabajar para proyectos digitales en el Sector Público. Estaba inmerso en el análisis diseño y construcción del sitio web adscrito al proyecto más grande y más costoso del que había sido participe. Estamos hablando de un sitio web con un presupuesto de más de 150K.
La persona funcionaria que lideraba el proyecto en el rol de cliente me dijo poco antes de terminar los trabajos que debíamos pasar una auditoría de accesibilidad promovida por el Observatorio de Accesibilidad.
¿Qué será la accesibilidad? ¿que se pueda acceder desde cualquier dispositivo? ¿Cómo voy a saber si la cumple?
Eran muchas las preguntas que me asaltaban y el miedo a no ser capaz o a no estar a la altura hacían presencia como cada vez que se presentaba ante mí un reto importante. Como suele pasar a muchas personas, tengo que decir que una vez lo consigues no parece tanto pero en su momento fue todo un orgullo conseguir el resultado que obtuvimos gracias al trabajo de todos los implicados.
Después de los primeros instantes de confusión, me puse a investigar sobre el asunto, recuerdo que mi primera búsqueda fue “accesibilidad web ejemplos” y para mi desilusión no encontré lo esperado, que eran ejemplos concretos y reales de accesibilidad en sitios web. Más tarde evolucioné las búsquedas y fui recopilando la información que necesité para superar el reto pero de esto ya hablaré en otro post.
En recuerdo a esa situación de mi primera búsqueda escribo este listado de ejemplos de accesibilidad en sitios web y si tienes conocimientos básicos de SEO hay cosas que te van a sonar.
Los ejemplos
1. Los encabezados
Los encabezados son etiquetas de formato que ayudan a estructurar los documentos, ya sean web, ofimáticos o de cualquier otro tipo.
Para las personas que utilizan ayudas técnicas que minimizan el impacto de sus dificultades en el acceso a la información es verdaderamente importante que se tengan
en cuenta un correcto orden de párrafos y encabezados puesto que esta acción permitirá que, por ejemplo, un lector de voz aplique la entonación y pausas adecuadas o informe de la estructura del documento de manera correcta al usuario.
2. Las imágenes
Hay numerosos elementos a tener en cuenta para que una imagen no contenga errores de accesibilidad: desde que los colores que aparezcan tengan un contraste suficiente entre sí hasta que siempre ofrezcan una alternativa textual.
Este último requisito también lo es en el ámbito del SEO para una correcta indexación por parte de los buscadores. A medida que uno se va introduciendo en el ámbito de la accesibilidad, aprende que uno de los beneficios colaterales de seguir las normas de accesibilidad mejora el SEO del sitio web sobre el que se aplique.
3. Las tablas
Este ejemplo es muy bueno porque algunos de sus elementos son lo que se llama coloquialmente zona gris. Por ejemplo, se recomienda evitar su uso siempre que sea posible pero no es un error utilizarla, eso sí, debe ir marcada correctamente. Algunos elementos a tener en cuenta:
- Evitar su uso para maquetación
- Marcar las filas y las columnas en el caso de las tablas complejas
- Especificar un título para la tabla
Existen más requisitos pero no es objeto de este post detallarlos todos.
4. El contraste de colores
El contraste de color entre los elementos que se posicionan uno encima de otro (letras de menú sobre fondo de menú, texto de una entrada sobre fondo,…) debe ser lo suficientemente alto como para garantizar la legibilidad.
Las directrices de la WCAG (el enlace te lleva fuera del sitio) recomiendanunas relaciones de contraste que pueden consultarse en numerosos sitios como por ejemplo en la documentación de Mozilla
Existen infinidad de casos adicionales a revisar pero los expuestos anteriormente buscan formar rápidamente una idea en la cabeza del lector sobre que implica en la práctica implementar alguno de los niveles de adecuación de accesibilidad existentes.
Si te interesa conocer más sobre accesibilidad puedes leer otros post, descargarte la guía rápida de accesibilidad para editores o consultar información sobre el curso de accesibilidad web que tienes disponible en nuestra plataforma.
