5 lecciones básicas para entender (y mejorar) la accesibilidad web.

Hoy en día el concepto de web responsive se ha extendido lo suficiente como para que se entiendan sus ventajas y se valore en cada caso si es el enfoque necesario. Si se quiere una web a la que los usuarios puedan acceder satisfactoriamente desde diferentes dispositivos en una experiencia homogénea y no se quiere generar contenidos específicos para dispositivos ni mantener diferentes desarrollos, ahí, responsive aparece como la mejor opción.

Por otro lado, el concepto de usabilidad se ha aceptado como guía de nuestra forma de abordar un proyecto web. Queremos que los usuarios accedan y utilicen con éxito los servicios que ofrecemos. Queremos que usen la web. Y cuantos más usuarios satisfechos tengamos, mejor. Pues bien, hablar de estos dos conceptos, responsive y usabilidad, es hablar de accesibilidad web (nos centraremos en web en este post).

Hoy en día todavía es frecuente entender la accesibilidad como algo que se hace para gente con alguna discapacidad, sobre todo visual. Esta concepción es muy limitada y reduccionista, y es el principal obstáculo que hay que superar. La accesibilidad es algo inherente a la evolución de la web e implica una visión mucho más amplia de la misma.

Personas, situaciones, dispositivos

La accesibilidad supone aplicar una serie de técnicas para hacer los sitios web accesibles para un mayor número de personas, situaciones y dispositivos. Una parte de nuestra audiencia con alguna discapacidad puntual o permanente se beneficiará de ello, pero no sólo ella. Otro “usuario” que lo hará, por ejemplo, es nuestro querido Google, que tampoco usa ratón ni diferencia bien los colores ;-)

El diseño en cada proyecto está centrado en una audiencia determinada, pero dentro de ella hay siempre una diversidad que hay que considerar. No sólo se trata de un tipo de usuario y sus capacidades, un buen diseñador de interacción debe vigilar en qué situaciones se usa la web (en movilidad o no; con conexión buena, regular o mala; con dispositivo moderno o no tanto; con iluminación deficiente; etc.). Si tenemos en cuenta las posibles condiciones de uso de un sitio web, también lo hacemos más accesible.

Información

Hoy en día, la web ha evolucionado desde sus inicios estáticos con imágenes incrustadas y tablas, hacia la web como documento, como unidad de información. Como tal, hay que estructurarlo bien, marcarlo, y darle propiedades adicionales que ayuden a entender su semántica.

Pongamos algunos ejemplos: si queremos introducir la cita de un autor, debemos usar las etiquetas HTML <blockquote> o <q>; y, si lo que queremos es un pie de página, utilizaremos <footer>; etc… Si cuidamos el código, cuidamos el contenido y su utilidad.

Esta evolución es la base de la gran revolución digital, la que ha abierto las puertas a utilidades antes impensables. Y en esta evolución radica el sentido de la accesibilidad bien entendida.

El punto de partida y 5 técnicas básicas

Lo primero es partir de un buen diseño que tenga en cuenta factores como el contraste entre letra y fondo, los tamaños de tipografía, el interlineado, un uso de colores adecuado y una buena distribución visual de los contenidos.

Se trata de buscar el equilibrio entre lo puramente estético y una buena legibilidad y comprensión del contenido. Para ello, lo más aconsejable es tener en cuenta estas 5 técnicas básicas:

1. A la hora de maquetar la web, hay cosas básicas que a veces se pasan por alto: por ejemplo la identificación correcta del idioma de la web, los cambios de idioma a lo largo de un texto, o indicar el idioma de la url de destino de un enlace, en caso de ser diferente. El atributo “lang” puede utilizarse en la mayoría de elementos de HTML y es muy sencillo indicarlo.
2. Los típicos enlaces de “Más información” que se repiten en una página, son enlaces que llevan a destinos diferentes con el mismo texto, planteando problemas para identificarlos fuera de contexto. Para solucionar esto basta con utilizar un texto descriptivo del enlace y ocultarlo a la vista con una técnica correcta. ¿Cómo? Posicionarlo fuera de pantalla. Hacer esto de forma lícita no supone un problema de penalización con los buscadores. A Google le gustan las webs accesibles.
3. Estructurar correctamente un formulario es sencillo. No cuesta nada usar “<label>” para etiquetar los elementos del formulario, agrupar los elementos asociados con “<fieldset>” y que el orden sea lógico.
4. Hay que indicar un texto alternativo a las imágenes mediante el atributo “alt” (o dejarlo vacío si son decorativas), una descripción más larga cuando haga falta mediante el atributo “longdesc” o mediante ”aria-describedby”, y es recomendable incluir un enlace a la descripción extensa a continuación de la imagen.
5. Poner atención en el foco sobre los elementos de la página: que sea visible y siga el orden correcto.

Responsabilidad. El salto cualitativo.

Si bien estas técnicas sencillas las incorporamos con facilidad en el desarrollo, hay muchas otras que suponen realizar un trabajo que sólo podrá llevarse a cabo en base a la convicción de su necesidad y sus ventajas por parte de todos los implicados en el proceso de creación y desarrollo.

Nosotros, como desarrolladores de productos digitales con un claro valor social, tenemos una responsabilidad que pasa por transmitir a los clientes el significado, la importancia y las ventajas de la accesibilidad.

Entender que no se puede hablar de usabilidad sin accesibilidad, ni viceversa, y que sus principios base son los mismos, hará que podamos asumir mejor su práctica.

No estaría mal empezar por re-pensar el icono que se suele asociar a la accesibilidad web, que responde a la concepción obsoleta del término, ¿no os parece?