A la hora de desarrollar nuestras aplicaciones web, solemos pensar en que tenga un buen contenido, que cargue rápido, sea bonita, funcional, etc. Pero no solemos pensar en la posibilidad de que haya personas que no puedan ver correctamente nuestra web o que su navegación pueda resultar tediosa o incluso molesta.
Para evitarlo y conseguir que nuestra web sea accesible tendremos que tener en cuenta algunas cuestiones básicas como conocer cuál es el nivel de accesibilidad de nuestra web y las necesidades de nuestros usuarios, para posteriormente poder adaptarla y mejorarla.
¿Por qué es importante la accesibilidad web?
La web se ha vuelto un recurso muy importante en nuestras vidas. La usamos día a día para aprender, encontrar empleo, comerciar, realizar trámites, informarnos, etc.
Por eso una web debe ser un recurso que ofrezca igualdad. Una web con una buena accesibilidad evita la discriminación a personas con discapacidad, ofreciendo las mismas oportunidades que al resto de usuarios.
La accesibilidad es tan importante que existe una directiva del Parlamento Europeo que establece unos requisitos mínimos en los sitios web del sector público. Además, existen diferentes comunidades que buscan mejorar la accesibilidad web. Una de estas comunidades es la W3C, que ha generado numerosas recomendaciones y estándares en la web.
Al mejorar la accesibilidad de nuestra web también mejoraremos el SEO y, por tanto, el posicionamiento de la misma, apareciendo antes en los diferentes motores de búsqueda y consiguiendo más visitas.
Para poder mejorar la accesibilidad de la web, aquí os dejo cinco consejos de accesibilidad, y así todos puedan visitar tu aplicación sin ningún tipo de problema.
1. Añade descripciones a las imágenes
En nuestras webs es común añadir imágenes para apoyar nuestro contenido. Tal vez podamos pensar que dicha imagen es bastante representativa, pero en caso de que un usuario visualice nuestra web des de un dispositivo sin color (como pueda ser un ebook), use un lector de pantalla a voz o la imagen se haya perdido, esa imagen no se visualizará o, al menos, no correctamente.
Para solucionar eso, es recomendable añadir descripciones a nuestro contenido multimedia mediante el atributo title.
Una vez añadido el atributo, al posar el ratón sobre la imagen, se mostrará el texto que hayamos introducido.
También es aconsejable añadir el atributo alt. Esté será interpretado por los lectores de pantalla, además de mejorar el SEO de nuestra web.
2. Resaltar elementos seleccionados
Cuando navegamos por la web con el teclado cada navegador tiene una forma distinta de resaltar el elemento seleccionado. Normalmente ese resaltado es una fina línea de puntos la cual puede no ser demasiado visible.
Para que el usuario pueda distinguir qué elemento tiene seleccionado mientras navega, podemos modificar ese resalto. Para este fin, tenemos la pseudoclase de CSS “:focus”.
Esta pseudoclase la podemos poner sola o solo con los elementos que queramos resaltar.
Entonces, si tenemos el siguiente código:
Tendremos los enlaces resaltados con una línea azul cuando naveguemos entre éstos con el tabulador:
Así se podrá ver bien por donde va nuestra navegación.
3. Deshabilitar animaciones
Las animaciones pueden mejorar nuestra web haciéndola más atractiva, pero hay personas a las que estas animaciones les son molestas o incluso pueden marearlas. Para evitar eso, los diferentes sistemas operativos tienen una opción para deshabilitar animaciones, opción que podremos usar en nuestros estilos CSS. Para eso, usaremos la propiedad:
@media (prefers-reduced-motion)
Ejemplo:
Si tenemos el siguiente código:
Tendremos un botón con una animación que lo hará cambiar de color constantemente:
Este botón siempre estará animado, ignorando la preferencia del usuario. Entonces añadiremos lo siguiente en nuestro CSS:
Con eso, el botón dejará de cambiar de color cuando el usuario configure su ordenador para que no haya animaciones.
Dicha opción se configura de la siguiente manera para cada sistema operativo:
- Windows 10: Configuración → Accesibilidad → Pantalla → Mostrar animaciones en Windows
- Linux con KDE: Preferencias del sistema → Comportamiento del espacio de trabajo → Comportamiento general → Velocidad de las animaciones (Instantánea para desactivarlas)
- Linux con GNOME: GNOME Tweaks (o Retoques) → General → Animaciones
- macOS: Preferencias del sistema → Accesibilidad → Pantalla → Reducir movimiento
- Android: (puede variar dependiendo del fabricante) Ajustes → Accesibilidad → Quitar animaciones
- iOS: Ajustes → Accesibilidad → Reducir movimiento
4. Colores y contraste
A la hora de escoger los colores de nuestra web, es importante que los colores escogidos contrasten bien, porque, aunque puedas leer correctamente el contenido de la web, hay personas con dificultades de ver ciertos colores.
Estos textos de ejemplo para la mayoría serán totalmente visibles, pero otros pueden tener dificultades para leerlos.
Consecuentemente, la WCAG (Web Content Accessibility Guidelines) creó un estándar que dictamina que la relación de contraste entre dos colores para que sea visible para cualquiera. Esa relación en la WCAG 2.0 es del 7:1, pero, ¿cómo podemos saber si dos colores están en la relación correcta?
Por ese motivo, tenemos herramientas como las de WebAIM, que nos permitirá escoger entre un color de fondo y otro para el texto, cajas o iconos y nos dirá si éstos tienen la relación de contraste correcta o no.
Otra comprobación a realizar para que nuestra web sea accesible para personas que no pueden percibir los colores es aplicar temporalmente durante el desarrollo un filtro de escala de grises.
Para ello, aplicaremos el siguiente CSS:
Con esto nuestra web se verá totalmente en blanco y negro, y si hay algún elemento que, por culpa de la falta de color, no percibimos correctamente, deberemos corregirlo.
Una vez detectados y corregidos todos los elementos poco visibles, podemos quitar el filtro.
5. Contraste alto
Aún con las mejoras del punto anterior, hay personas que necesitan mucho más contraste y, por ese motivo, pueden activar la opción de contraste alto en su sistema operativo. Cuando está activado, el contraste alto cambia los colores de todo el sistema, incluyendo las webs que carga el navegador, reduciendo así el número de colores a mostrar y que los que se muestran sean muy diferentes entre sí.
Al hacer eso, podemos perder elementos que queríamos resaltar.
Por ejemplo, al tener el siguiente código:
Tendríamos el siguiente resultado:
Pero al activar el contraste alto se vería así:
Estaríamos perdiendo el resaltado de nuestro texto. Para evitar eso, podemos realizar un resaltado que no dependa de los colores cuando el usuario tenga activado el contraste alto. Para lo cual usaremos la siguiente propiedad:
@media (prefers-contrast: more)
Entonces, al añadir el siguiente código a nuestro CSS:
Nuestro texto quedaría resaltado con un borde, pero solo si el usuario tiene el contraste activo:
Dicha opción se configura de la siguiente manera para cada sistema operativo:
- Windows 10: Configuración → Accesibilidad → Contraste alto → Activar el contraste alto
- Linux con KDE: No hay opción de contraste alto
- Linux con GNOME: Configuración → Accesibilidad → Contraste alto
- macOS: Preferencias del sistema → Accesibilidad → Pantalla → Aumentar contraste
- Android: No hay opción de contraste alto
- iOS: Ajustes → Accesibilidad → Aumentar contraste
Desgraciadamente esta opción no funciona en Firefox.
Conclusiones
Como podéis ver, hay muchas cosas a tener en cuenta a la hora de desarrollar nuestra aplicación web, pero muy necesarias para que todo el mundo pueda visitarla sin excluir a nadie.
¿Sabéis más consejos para una mayor accesibilidad?
