Accesibilidad web: diseño inclusivo y user experience (UX) para personas con discapacidad
La accesibilidad web no solo es vital para personas con necesidades especiales, sino que también debe tenerse en cuenta en cualquier tipo de diseño para que usuarios de cualquier lugar, edad o condición sean capaces de realizar sus tareas con éxito.
En este post te contamos cómo diseñar una web accesible, incluso para aquellas personas con discapacidades visuales o motrices. ¡Sigue leyendo!
Qué tipos de discapacidad existen y cómo afectan a la interacción
Solemos pensar que no es necesario preocuparse por la accesibilidad porque el porcentaje de personas discapacitadas que navegan por internet no nos parece relevante. Lo cierto es que es muy difícil conocer los datos sobre discapacidad de un determinado territorio e, incluso, precisar cuántos usuarios querrán acceder a una web. Sin embargo, lo que sí es posible, es hacernos una idea de la amplitud de personas afectadas si tenemos en cuenta las dolencias que pueden mermar sus capacidades de navegación:
- Ceguera, en cualquiera de sus grados
- Daltonismo o problemas con el procesamiento del color
- Sordera o audición disminuida
- Discapacidad motriz que afecta a la utilización de pantallas o dispositivos
- Problemas relacionados con la compresión o el procesamiento de la información
Las personas con discapacidades visuales severas utilizan un sistema de braille para navegar por internet.
Además, en los datos oficiales no encontramos la enorme variedad de afecciones temporales o trastornos no diagnosticados que pueden disminuir las capacidades de un usuario, como, por ejemplo: lesiones eventuales que afecten a la movilidad de las manos, cataratas, déficit de atención, problemas de memoria…
Y, por último, también hay ciertos elementos relacionados con la tecnología que afectan negativamente a la accesibilidad, algo así como una “discapacidad tecnológica”: mala calidad de la conexión a internet, herramientas y sistemas operativos desactualizados o dispositivos de tamaño y prestaciones reducidos, entre otros. La falta de los recursos necesarios para navegar de forma adecuada afectará negativamente al tiempo de espera y a la carga y descarga de archivos multimedia, provocando problemas de compatibilidad y de visualización.
Por lo tanto, si tenemos en cuenta que una buena parte de nuestros usuarios tendrán alguna discapacidad física o tecnológica que afectará a su experiencia ¿cómo podemos mejorar la accesibilidad y por tanto disminuir las posibilidades de que tengan problemas durante la navegación?
Los usuarios de edad avanzada tienen mayores problemas de accesibilidad debido a la pérdida progresiva de capacidades y a una menor destreza con el uso de los dispositivos.
Cuáles son las claves para diseñar y desarrollar una web accesible
· Estructurar correctamente los contenidos, pensando en los lectores de pantalla.
La jerarquía del contenido es vital en la creación de cualquier página web, ya que facilita la comprensión del contenido, mantiene una estructura coherente y mejora el escaneo de los motores de búsqueda. Pero tiene otra función primordial y es ayudar a las personas con problemas de visión a interpretar el contenido mediante lectores de pantalla que necesitan ciertas condiciones para funcionar correctamente:
- los títulos h1, h2… deben estar bien indicados y según importancia, por ejemplo: nombre de sección y nombre de subsección o título y subtítulo.
- los nombres de las secciones o bloques deben ser descriptivos e indicar correctamente su contenido. Es decir, por ejemplo, que una página de Noticias enlace a artículos de actualidad y no a otro tipo de contenido que no tenga nada que ver.
- los enlaces o referencias a páginas deben mantenerse durante la navegación, eso quiere decir que si tenemos un link que se llama Home en un punto, no podemos llamarlo Inicio en otro.
· Poner texto alternativo en las imágenes y subtítulos en los vídeos
Las imágenes también deben poder ser rastreadas por los buscadores e interpretadas por los lectores de pantalla, pero, además, el texto alternativo es necesario para aquellas situaciones en las que debido a un error o a problemas de conexión la imagen no se muestra.
En cuanto a los subtítulos de los vídeos, son importantes para que tanto las personas con dificultades auditivas como aquellas que tienen dificultades con el idioma puedan seguir el contenido. De manera adicional también se debe tener en cuenta la audio descripción para personas con discapacidad visual, para disponer de una narración en audio que describa lo que está ocurriendo en el vídeo.
· Utilizar un buen contraste de color y diseñar pensando en blanco y negro
Debemos ponernos en la piel de nuestros usuarios y tener en cuenta que pueden tener problemas visuales que les impidan ver con claridad o que les afecten en la detección de todas o alguna gama de color. Por ello, primar el contraste de los colores respecto a la estética es imprescindible, ya que un contraste deficiente también dificulta la lectura y la detección de los elementos en pantallas con mala resolución o mucho brillo, como por ejemplo las pantallas de dispositivos móviles en entornos con mucha luz.
¿Y qué pasa cuando un diseño es precioso y colorido, pero no funciona en blanco y negro? Quizás no te lo hayas planteado con anterioridad, pero en los casos en que un usuario no es capaz de distinguir los colores es probable que no pueda diferenciar los elementos y le resulte difícil navegar en tu web. Pon especial atención en el diseño de formularios, la comunicación de errores y los mensajes que requieren la acción del usuario, ya que, si ese tipo de comunicación solo se basa en el uso del color, puede pasar desapercibida.
Comparativa de visualización de la página de inicio de Amazon tal y como lo verían usuarios con diferentes problemas de codificación del color.
Cuál son las mejores herramientas para revisar la accesibilidad de tu página web
¿Quieres comprobar el estado actual de la accesibilidad de tu web? Te contamos cuáles son las mejores herramientas para conseguir sitios web accesibles que tengan en cuenta las necesidades especiales de las personas con discapacidad.
- Validadores de estándares HTML/CSS: tanto el validador de HTML de W3C como el validador de CSS de W3C te permitirán analizar el código de tu página web para saber si presenta errores, si se ajusta a los estándares y si es compatible con los navegadores. Cuanto más limpio, eficiente y adaptable sea, mayor será su accesibilidad.
- Evaluador del grado de accesibilidad: el analizador Taw permite comprobar los cuatro pilares de la accesibilidad; que sea perceptible, operable, comprensible y robusta. También existe una opción en forma de extensión para el navegador llamada Siteimprove que mide nivel de accesibilidad (que va de A a AAA) y otra, ChromeLens, que permite probar la visualización de la web con problemas de visión o con el uso exclusivo del teclado.
- Lectores web: aunque existen diversas opciones de pago que puedes probar con el periodo de prueba, también hay otras gratuitas que te permitirán navegar desde la perspectiva de una persona con discapacidad visual, como puede ser NVDA.
- Simuladores responsive: además de los propios simuladores incorporados en los navegadores habituales al hacer clic en la acción “Inspeccionar” en el botón derecho del ratón, también es posible utilizar la herramienta Responsinator que permite ver la url que indiquemos en las pantallas de varios dispositivos simultáneamente.
Como ves, la accesibilidad web para discapacitados es un reto que muchas marcas todavía deben plantearse. Piensa en tus usuarios y en sus necesidades, y desarrolla tu página web utilizando un diseño inclusivo que tenga en cuenta la multitud de particularidades que pueden dificultar la navegación. Los sitios webs accesibles, además, responden mejor a los estándares y tienen mejor tiempo de carga, por lo que ¡todos tus visitantes lo agradecerán!
Y si necesitas ayuda con ux design, accesibilidad o desarrollo web no dudes en contactarnos, te asesoraremos en lo que necesites.