La accesibilidad web se define como un conjunto de prácticas de diseño que permiten que un sitio web pueda ser utilizado por el mayor número de personas posible. La accesibilidad se ideó para las personas con discapacidad, y para que todo el mundo pueda entender, navegar e interactuar con la web.
A día de hoy, la accesibilidad beneficia a muchos más colectivos. Por ejemplo, también facilita el acceso a la web a personas de edad avanzada o que puedan tener habilidades que, debido a la vejez, se hayan visto perjudicadas. En efecto, la accesibilidad web es equiparable a la accesibilidad en la arquitectura moderna y lo que implica la supresión de barreras arquitectónicas, como construir rampas de acceso, pasillos más anchos o ascensores.
Sería poco ético excluir personas debido a una discapacidad visual, auditiva, física, cognitiva, neurológica o del habla. Todas las personas somos diferentes, pero con los mismos derechos y oportunidades. Por eso es importante realizar diseño web accesible para todo el mundo.
En resumen: un sitio web accesible hace fácil el acceso de sus contenidos a los usuarios con cualquier tipo de discapacidad, a la vez que ofrecen la misma funcionalidad desde dispositivos limitados, como sería el caso de dispositivos sin pantalla, dispositivos sin teclado ni ratón, etc.
Ventajas de diseñar un sitio web accesible
Para el diseño de un sitio web accesible se hace uso de elementos semánticos del HTML. Esto conlleva que además de mejorar la accesibilidad por los dispositivos que hacen uso de dichos elementos, también se mejora la optimización en los motores de búsqueda (SEO, del inglés Search Engine Optimization).
El diseño web accesible puede tener como consecuencia una mejor experiencia de usuario, incluso para usuarios que no tengan ningún tipo de discapacidad. Puede ser beneficioso en dispositivos móviles e incluso para usuarios con una conexión lenta de Internet. Todas las personas se benefician de la accesibilidad.
Tipos de discapacidad
Las personas con alguna discapacidad son tan diversas como las personas que no tienen ninguna. De igual manera, existen varios tipos de discapacidad, y es importante conocerlas bien para poder desarrollar un sitio web accesible.
Las personas con discapacidad visual son aquellas que tienen ceguera, poca visión o daltonismo. Estas personas pueden usar amplificadores de pantalla consistentes en lupas físicas o funciones de zoom. Los navegadores web tienen funciones de zoom implementadas. También existen lectores de texto en voz alta.
Las personas con discapacidad auditiva son aquellas que tienen trastornos auditivos o con diferentes grados de pérdida auditiva. Es común ofrecer alternativas textuales a contenidos de audio y vídeo, como transcripciones manuales o algorítmicas. Por ejemplo, en YouTube es posible activar los subtítulos.
Las personas con discapacidad motriz tienen problemas de movilidad o físicos, como sería el caso de la pérdida de una extremidad o la parálisis. Esta discapacidad tiene por consecuencia una pérdida de control en las extremidades, dificultando así el uso del teclado, el ratón o de una pantalla táctil. Puede ser útil proveer teclas adicionales para realizar acciones concretas en la navegación.
Finalmente, las personas con discapacidad cognitiva pueden tener capacidades intelectuales limitadas que pueden derivar en dificultad para entender el contenido o confusión ante sitios web con un diseño poco intuitivo. Por eso es importante redactar contenido con un lenguaje sencillo, centrar la atención en el contenido, minimizar las distracciones como los anuncios, usar elementos de marcado y formateado de texto y diseñar formularios que resulten fáciles de completar.
Directrices de implementación
Cuando se desea implementar la accesibilidad a un sitio web, es conveniente hacerlo desde el principio del desarrollo. No se trata de adaptar un sitio web a la accesibilidad, sino de crearlo teniendo la accesibilidad como pilar del proyecto. Esto es importante porque es más fácil crear desde cero que adaptar o modificar.
A nivel de contenido, es más fácil de que sea accesible, empezando sobretodo por la información textual. No obstante, el contenido multimedia presenta más retos y requieren un mayor presupuesto. Si se trata de un vídeo o un audio, se puede aportar la transcripción. Muchos sitios educativos ya lo están haciendo así.
Hay que tener en cuenta que es muy difícil de conseguir un sitio web que sea 100% accesible. Siempre puede aparecer algún tipo de límite por el que algún usuario tendrá dificultad de uso. Por ejemplo, si se planea incluir un gráfico 3D con JavaScript, será bueno añadir también un tabla con todos los datos.
Si el sitio web muestra imágenes, como podrían ser obras de arte, fondos de pantalla o logotipos, lo ideal será que cada imagen tenga el atributo alt con una descripción. En el fondo, hay que ser conscientes también de que un sitio web puramente visual presentará dificultades a personas con discapacidad visual.
El W3C (Consorcio WWW) publicó un documento que incluye los criterios de accesibilidad. El documento se llama Web Content Accessibility Guidelines (WCAG), y se divide en cuatro implementaciones: perceptibles, operables, comprensibles y robustas. Se recomienda su lectura.
Mejorar la accesibilidad
Elementos semánticos
El uso de elementos HTML con valor semántico es un gran paso para dotar un sitio web de una buena accesibilidad. Usar el elemento correcto tiene sus ventajas: estilos adecuados por defecto —el caso de los controles—, obtener funcionalidades gratis ya implementadas en los navegadores web, ventajas de adaptabilidad en móviles y ventajas para el posicionamiento web (SEO).
Por eso es importante que cuando se escribe un título se usen las etiquetas de encabezado (de <h1> a <h6>). Lo que no sería nada accesible sería usar un párrafo e incrementar su tamaño mediante hojas de estilo en cascada (CSS). Existen muy malas prácticas en la red, y es conveniente evitarlas.
En este sentido, es preferible usar el elemento <button> o el elemento <input type='button'> para insertar un botón, en vez de usar el elemento <div>. Con los elementos de los controles interactivos podremos usar el tabulador para saltar de un control al siguiente. También es útil usar <label> para etiquetar.
Incluso a la hora de crear tablas de datos, se hace difícil determinar las celdas que corresponden a las cabeceras de cada columna. Si en lugar de usar el elemento <td> se usa el elemento <th>, algunos lectores de pantalla lo interpretarán de forma correcta. Se trata de usar los elementos más adecuados para cada caso.
Estructura web
Una buena estructura web es aquella que hace uso de los elementos semánticos para crear divisiones de un documento HTML. Por ejemplo, es recomendable usar los elementos <header>, <footer>, <article> y <side> en vez de recurrir siempre al <div>, que no aporta ningún tipo de información adicional.
Lenguaje claro
La claridad del lenguaje también es un factor determinante en relación con la accesibilidad web. Por ello, se recomienda usar un lenguaje claro, no demasiado complejo, buscando sinónimos fáciles y de uso común, y evitando palabras extrañas. También es importante usar una buena guía de estilos, no cometer errores ortográficos ni gramaticales o expandir las abreviaciones y los acrónimos.
Texto alternativo
El contenido visual no puede ser visto por personas con discapacidad visual, y por ello es de gran ayuda usar el atributo alt para aportar una descripción lo suficientemente clara del recurso enlazado con el elemento <img>, de imagen. Los lectores de pantalla podrán leer el texto de dicho atributo.
Si la descripción debe ser muy extensa, es preferible usar el atributo longdesc, ya que permite la inclusión de más de 1024 caracteres. También puede usarse la combinación de los dos elementos <figure> y <figcaption> para añadir, en este último, una descripción extensa y con texto formateado.
Transcripciones de texto
El contenido multimedia con diálogos auditivos no puede ser escuchado por personas con discapacidad auditiva. Por tanto, una gran ayuda es proveer la transcripción literal de los diálogos o conversaciones, ya sea de un vídeo o de un audio. Puede ser tan simple como añadir el texto en la página web, directamente.
Controles multimedia
Además, es recomendable crear controles personalizados para reproducir o detener el contenido, modificar el volumen, etc. Los controles nativos que provee el HTML5 no son lo suficientemente accesibles. Una buena idea es hacer que estos controles sean accesibles desde el teclado. Esto puede hacerse con el atributo controls de los elementos <video> y <audio> en combinación con JavaScript.
Abreviaciones
Para las abreviaciones puede hacerse uso del elemento <abbr>, añadiendo el texto abreviado entre las etiquetas <abbr> y </abbr> y el texto expandido dentro del atributo title. De igual manera, puede hacerse uso de recursos literarios, como serían los paréntesis ( y ) y los guiones largos —.
Enlaces intuitivos
Los enlaces textuales deben ser intuitivos. Es evidente que el diseño es algo muy subjetivo y que cada desarrollador o diseñador web tendrá sus preferencias, pero también es cierto que existen algunas convenciones sobre el estándar de los enlaces: subrayados y de un color diferente, normalmente azul.
También es habitual indicar los enlaces ya visitados, normalmente con otro color, como suele ser el color púrpura. En ocasiones se indica el enlace activo (pulsado) de color rojo. Cuando el puntero del ratón se coloca encima del enlace, aparece el icono de un puntero diferente, indicando que se puede clicar.
Contraste de color
El contraste de color es un tema muy importante y demasiadas veces olvidado. Es habitual encontrar sitios web con un color de texto demasiado claro sobre blanco que se lee con dificultad, incluso para alguien que no tenga ningún tipo de dificultad visual. El color de texto debe tener buen contraste con el color de fondo.
Para verificar si el contraste es óptimo existen fórmulas de cálculo entre dos colores. Existen herramientas que calculan el ratio de contraste entre dos colores; por ejemplo, puede usarse la herramienta online de WebAIM. Vale la pena tenerlo claro, porque querer leer algo y no poder es una mala experiencia.
JavaScript no invasivo
Un sitio web debe estar construido con los elementos HTML más adecuados, evitando el uso de JavaScript en la construcción de partes importantes o de contenido. Usar JavaScript para estas tareas puede ser invasivo y provocar una mala accesibilidad. De hecho, muchos navegadores web no tienen soporte para JavaScript o lo tienen deshabilitado, y lo mismo sucede con los lectores de texto. JavaScript debe ser usado para mejorar la funcionalidad del sitio web.
Diseño responsive
Crear un diseño web responsive es una forma de lograr que un sitio web se pueda visualizar de forma correcta en todos los dispositivos, independientemente del tamaño de cada pantalla. De esta manera, la estructura del sitio web se amoldará a las dimensiones sin que ningún elemento se vea perjudicado. De igual manera, es óptimo que los menús sean siempre accesibles.
