La accesibilidad web es un conjunto de buenas prácticas en el diseño web cuyo objetivo es conseguir que un sitio web pueda ser usado por el mayor número posible de usuarios. Se trata de asegurar que las personas con discapacidades también puedan utilizar sitios web de manera efectiva.
Esto implica que un sitio web debe ser comprensible, navegable y operable para todas aquellas personas que tienen discapacidades, ya sean visuales, auditivas, motoras o cognitivas. La accesibilidad también beneficia a las personas de edad avanzada, cuyas habilidades pueden verse reducidas por la vejez.
No sería correcto excluir personas de la web debido a una discapacidad visual, auditiva, motora o cognitiva. Todas las personas tenemos los mismos derechos y oportunidades. Por eso el diseño web accesible es tan importante.
Semántica y control estructural
La accesibilidad de una página web debe ser tratada a través de todos los lenguajes que la forman, por lo que no se debe olvidar que una página debe estar estructurada con los elementos HTML más adecuados.
Con el lenguaje CSS se puede lograr que un elemento HTML se vea de cualquier forma. Esto no significa que deba hacerse. Siempre que sea posible, se debe usar el elemento semántico más apropiado en cada caso. De lo contrario, se puede causar confusión al usuario, provocando problemas de interacción.
Cada elemento HTML se ve y se comporta de una determinada manera, y esa es la expectativa que tienen los usuarios. Los navegadores web siguen unas convenciones comunes según la funcionalidad de cada elemento.
Por poner un ejemplo, los encabezados (titulares) de una página web ayudan a que el usuario que esté usando un lector de pantalla pueda navegar entre titulares. Si no hay encabezados, se pierde esta posibilidad.
Como regla general, hay que actualizar el estilo de una característica concreta para que su aspecto se ajuste a un diseño concreto, pero no hay que modificarlo tanto como para que no se vea ni se comporte según lo esperado.
Contraste y legibilidad
Cuando se escogen colores para el diseño web, hay que asegurarse de que el color del texto tiene un buen contraste respecto el color del fondo. No obstante, es demasiado habitual encontrar sitios web con una ratio de contraste demasiado baja y, en consecuencia, su contenido es demasiado difícil de leer.
El contraste entre dos colores se puede verificar mediante ciertas fórmulas de cálculo. En la actualidad hay muchas herramientas online que han implementado estos algoritmos de manea que cualquiera pueda realizar rápidas comprobaciones. Un ejemplo de ello es la herramienta de WebAIM.
En los siguientes ejemplos se crea un párrafo amarillo sobre un fondo blanco y un párrafo azul sobre un fondo negro. La legibilidad es pésima.
Código CSS:
.ej1 {
background: black;
color: midnightblue;
}
.ej2 {
background: white;
color: yellow;
}
Resultado:
Legibilidad baja.
Legibilidad muy baja.
El primer párrafo tiene una relación de contraste de 2.44:1, mientras que la del segundo es de 1.07:1, todavía más baja. Se trata de dos valores totalmente insuficientes, muy alejados de los valores mínimos exigibles.
Las pautas de accesibilidad del W3C (Consorcio WWW) definen unas relaciones de contraste que se deben cumplir. Para cumplir con las pautas del nivel AA, la relación de contraste debe ser de al menos 4.5:1 en texto normal y de 3:1 en texto grande. Para el nivel AAA (más estricto), la relación de contraste debe ser como mínimo de 7:1 en texto normal y de 4.5:1 en texto grande.
A continuación se diseña un texto con una relación de contraste respecto el color de fondo de 7.39:1, para cumplir con el nivel AAA.
Código CSS:
.ej3 {
background: #c0c0c0;
color: #003535;
}
Resultado:
Legibilidad alta.
Enlaces estandarizados
Ya hace muchos años desde que se publicó la primera web, dando comienzo a la era de Internet. Desde entonces, se han popularizado algunas convenciones sobre el diseño de los enlaces, y es que a día de hoy ya es muy habitual encontrarlos subrayados y de un color diferente al del resto del texto.
En este sentido, está estandarizado que los enlaces no visitados aparezcan de color azul, mientras que los enlaces visitados sean de color púrpura. Si se desea, se puede indicar un color para los enlaces activos, mientras están pulsados. También se suele aplicar cambios cuando el puntero del cursor pasa por encima del enlace; aunque en dispositivos móviles esto ya no tiene sentido.
En Recursivos, los enlaces se ven de color azul y el texto aparece subrayado, tanto los que han sido visitados por el usuario como los que no. Por defecto —sin estilos modificados—, los enlaces se verían con el aspecto siguiente:
Párrafo con un enlace normal.
Párrafo con un enlace visitado.
Párrafo con un enlace activo.
Diseño web responsive
Con la llegada de los dispositivos móviles se ha incrementado mucho la variedad de las dimensiones de la pantalla de los usuarios. Esto implica que un diseño web debe verse bien tanto en pantallas grandes como en pantallas pequeñas. Por tanto es importante crear un diseño que se adapte de forma automática.
Con un diseño web responsive, el sitio web se podrá visualizar de forma correcta en cualquier dispositivo, amoldándose a todas las dimensiones posibles. Con esto se conseguirá que todos los elementos se vean de forma correcta; que no se vean cortados o que directamente queden inaccesibles para el usuario.
Hay que garantizar que el contenido y la navegación no se ven perjudicados, siendo siempre accesibles, con buen contraste y buena legibilidad.
Diseño personalizable
El diseñador web puede integrar botones para que el usuario final personalice el diseño según sus preferencias. Un ejemplo de ello que es bastante habitual es proveer botones que generan un escalado del texto para mejorar la legibilidad. Incluso hay sitios que permiten modificar la tipografía.
Otra funcionalidad interesante es proporcionar un botón que aplique un cambio de color general, por ejemplo, pasando de colores claros a colores oscuros, y además aportando un contraste de color más elevado. Esto es útil para el usuario cuando quiere acceder al sitio web estando en un entorno oscuro: cada vez más se lee artículos antes de ir a dormir, con el brillo del dispositivo al mínimo.
En Recursivos proporcionamos un botón ubicado en el menú de navegación superior que alterna entre dos esquemas de colores: claro y oscuro.
