Cómo evaluar (y mejorar) su sitio web con pruebas de accesibilidad

Por qué son importantes las pruebas de accesibilidad

Las pruebas de accesibilidad son el proceso de evaluación de su sitio web para asegurarse de que sea utilizable por personas con discapacidades. Por ejemplo, si utiliza una paleta de colores que dificulta que una persona daltónica navegue por su sitio web, las pruebas de accesibilidad adecuadas deberían detectarlo.

El objetivo principal de las pruebas de accesibilidad es garantizar que la mayor cantidad posible de personas puedan disfrutar de su sitio web. Sin embargo, no es una búsqueda completamente altruista ya que también te beneficias. Así es cómo:

• Le permite llegar a usuarios que de otro modo no llegaría.  Cuanto mejor optimizado esté su sitio web para usuarios con discapacidades, más personas podrá alcanzar. Esas audiencias pueden sumar, incluso si representan un bajo porcentaje de la población.
• Muestra profesionalismo.  No mucha gente hace un esfuerzo adicional cuando se trata de accesibilidad. Esto significa que cualquier mejora que realice demuestra que está comprometido a brindar una mejor experiencia.

En la mayoría de los casos, no es posible crear un sitio web accesible para todos. Sin embargo, es posible mejorar la experiencia de muchas personas haciendo algunos ajustes simples en el diseño de su sitio web.

Antes de profundizar en los detalles, le recomendamos que eche un vistazo a las   Pautas de accesibilidad al contenido web (WCAG) elaboradas por el World Wide Web Consortium (W3C) . En caso de que no esté familiarizado con el W3C, es una comunidad internacional que trabaja para desarrollar estándares web para mejores experiencias.

Para ser justos, las WCAG pueden ser una lectura algo seca, pero pasar un tiempo repasándolas es la mejor manera de aprender más sobre los estándares de accesibilidad. En la siguiente sección, repasaremos varios pasos concretos para probar y mejorar la usabilidad de su sitio web y explicaremos por qué son esenciales.

Cómo evaluar (y mejorar) su sitio web con pruebas de accesibilidad (en 4 pasos)

Hay muchas herramientas en línea que puede usar para probar rápidamente si su sitio web cumple con las WCAG. Sin embargo, este tipo de herramientas pierden muchas cosas que solo puede descubrir a través de pruebas exhaustivas. Son excelentes puntos de partida, pero usarlos no constituye una prueba de accesibilidad adecuada . Con esto en mente, entremos en detalles.

Paso #1: Pruebe su sitio web para detectar problemas con el deterioro de la visión del color

Una parte algo significativa de la población tiene dificultad para diferenciar entre colores debido a problemas físicos. Esta discapacidad se conoce como daltonismo y es más frecuente en los hombres.

Como puede imaginar, el daltonismo puede dificultar la navegación por un sitio web en algunos casos. Por ejemplo, las personas a menudo usan el contraste en el diseño web para resaltar elementos esenciales en una página. Es posible que alguien con daltonismo no vea mucha diferencia dependiendo de los colores que use. En algunos casos extremos, es posible que las personas solo puedan percibir las cosas en tonos de gris, lo que se denomina «monocromatismo completo».

Naturalmente, diseñar en torno al monocromatismo completo es casi imposible. Lo que  puede  hacer es optimizar su sitio web, de modo que sea accesible para las formas más comunes de daltonismo, que apuntan al rojo y al verde, seguidos del azul y el amarillo. Su primer paso debe ser utilizar una herramienta como el Filtro de daltonismo de Toptal , que le permite representar su sitio web como lo vería una persona daltónica:

Para usar la herramienta, simplemente pegue la URL que desea probar dentro del  cuadro Escriba una URL ,  luego elija un filtro del menú a la derecha. Esto incluye opciones para tres tipos distintos de daltonismo y una opción general:

Para obtener los mejores resultados posibles, querrá representar la página que está probando usando cada filtro por separado. Luego, verifique si alguno de los elementos de su página se vuelve más difícil de distinguir para los usuarios con la forma específica de daltonismo. Si encuentra que hay elementos que necesita volver a trabajar, la clave para hacerlos más accesibles es simplemente aumentar su contraste, que a menudo se reduce a elegir los colores correctos .

Paso n.º 2: verifique los problemas que afectan a los usuarios con discapacidad visual general

Hay muchas discapacidades visuales no relacionadas con los colores. La miopía, por ejemplo, provoca dificultades para ver objetos lejanos, lo que hace que se vean borrosos. Las cataratas, por otro lado, pueden nublar su visión, como si estuviera mirando a través de una ventana esmerilada.

Si no puede concentrarse en los elementos en función de su distancia, puede optimizar el diseño de un sitio web para tener eso en cuenta (dentro de lo razonable). Por otro lado, si sufres de una condición que obstruye tu visión, es más difícil de tratar.

Sin embargo, no hay muchas herramientas que pueda usar para simular cómo es experimentar un sitio web como si sufriera de hipermetropía. Nuestro favorito es una extensión de Chrome llamada NoCoffee , que le permite colocar filtros en cada página que ve y modificarlos tanto como desee:

La mala noticia es que no hay otras herramientas que incluyan tanta funcionalidad como NoCoffee para otros navegadores. Sin embargo, Google Chrome está disponible para todas las plataformas principales y sus herramientas para desarrolladores siempre son útiles.

Una vez que instale la extensión, puede hacer clic en el icono en su menú y luego habilitar el  filtro Desenfocar  . De esta forma, podrás experimentar de manera práctica lo que ven los usuarios con hipermetropía cuando visitan tu sitio. En la mayoría de los casos, solo hay dos cosas que puede hacer para mejorar su experiencia:

1. Haga un mejor uso del contraste, como discutimos durante el paso número uno.
2. Aumente el tamaño de su fuente para que su texto sea más fácil de leer, incluso para personas con discapacidades visuales.

Naturalmente, solo puede llegar hasta cierto punto en lo que respecta al tamaño del texto antes de que afecte negativamente el diseño de su sitio web. Por ejemplo, en esta captura de pantalla, puede ver los títulos de las publicaciones de nuestro blog, pero no sus sinopsis:

Podríamos  aumentar  esos tamaños de texto, pero hay un límite y rendimientos decrecientes. Si bien esto cubre problemas basados ​​en texto, nos quedan las imágenes, lo que nos lleva al siguiente paso.

Paso #3: Agregue atributos descriptivos ‘Alt’  a sus imágenes para usuarios con discapacidades visuales

Los atributos Alt  , o ‘etiquetas’ , son elementos que describen el contenido de una imagen. Los motores de búsqueda y los lectores de pantalla pueden usar la información para descubrir de qué se trata una imagen y  comprender mejor el contenido que la rodea.

Más importante aún, el texto alternativo  permite a los usuarios con discapacidad visual comprender cuáles son las imágenes de su contenido. Hay varios navegadores diseñados exclusivamente para ese tipo de usuario y, en la mayoría de los casos, leen el material en voz alta para que las personas puedan confiar en sus oídos en lugar de sus ojos.

En resumen, cualquier imagen que agregue a sus publicaciones y páginas debe incluir  etiquetas alternativas  descriptivas . Tome esta flor, por ejemplo:

Si tenía prisa, podría escribir simplemente «una flor»  como etiqueta alternativa de la imagen. Sin embargo, sería mucho mejor optar por una opción como “Una flor roja en medio de un campo”. Por supuesto, hay cosas que son demasiado descriptivas, y hay casos en los que una etiqueta alt corta será suficiente. Sin embargo, en términos generales, las descripciones más largas mejorarán la experiencia de los usuarios con discapacidades visuales.

Como sabrá, WordPress le permite modificar fácilmente las etiquetas alt de su imagen. Simplemente elija una imagen, ya sea de su biblioteca de medios o dentro de una publicación o página, y haga clic en su  botón Editar  . En la siguiente pantalla, busque el  campo Texto alternativo  y escriba su descripción:

Ahora guarde los cambios y ya está todo listo. Sin embargo, recuerde: este es un proceso que debe seguir para cada imagen en su sitio web. Puede parecer mucho trabajo, pero con el tiempo, se convertirá en una segunda naturaleza.

Para obtener más información sobre cómo se pueden usar los atributos HTML para mejorar la accesibilidad, consulte nuestra publicación sobre cómo usar aplicaciones de Internet enriquecidas accesibles (ARIA) para mejorar su sitio web de WordPress.

Paso #4: Revisa los subtítulos de tu video

Hasta ahora, nos hemos centrado por completo en las discapacidades visuales, porque la mayoría de los sitios web se consumen a través de los ojos, por así decirlo. Sin embargo, hoy en día es común que los sitios utilicen contenido de video en algunas de sus páginas, lo que plantea el problema de tener que lidiar con discapacidades auditivas.

La optimización de video para personas con discapacidad visual está fuera de tus manos, en la mayoría de los casos. Sin embargo, lo que  puede  hacer es asegurarse de que su audio sea fácil de entender. Algunos de sus usuarios pueden tener problemas de audición, en cuyo caso, deberá recurrir a los subtítulos.

Agregar subtítulos a sus videos es la forma más eficiente de garantizar que las personas con discapacidad auditiva aún puedan aprovechar al máximo su contenido. Sin embargo, puede ser mucho trabajo subtitular completamente incluso videos cortos. Si eso es algo que no puede hacer, siempre puede probar funciones como la herramienta de subtítulos ocultos de YouTube :

Por supuesto, si ha visto alguna función de subtítulos de video. sabrá que la tecnología no es perfecta. Sin embargo, es una opción válida si la alternativa es no tener subtítulos. Si subes tus videos a YouTube, WordPress te permitirá incrustarlos en tu sitio web simplemente pegando su enlace prácticamente en cualquier lugar dentro de tus publicaciones y páginas:

De esta manera, sus usuarios pueden optar por activar los subtítulos si lo necesitan. Sin embargo, tenga en cuenta que si gran parte de su contenido gira en torno al video, sería prudente comenzar a buscar opciones de subtítulos dedicados. De esa forma, se asegurará de que su contenido se represente con precisión y que los usuarios con discapacidad auditiva puedan disfrutarlo.

Conclusión

La accesibilidad no es algo que mucha gente considere mientras trabaja en el diseño de su sitio web. Sin embargo, es un factor importante a tener en cuenta si desea brindar una experiencia óptima a sus usuarios. Además, hacer que su sitio web sea más fácil de usar no solo beneficiará a los usuarios con discapacidades, sino a toda su audiencia.

La forma más eficiente de sumergirse en las pruebas de accesibilidad es consultar las WCAG para que tenga una idea de a qué debe aspirar. Luego, siga estos cuatro pasos básicos para abordar los principales problemas de accesibilidad que podría encontrar:

1. Pruebe su sitio web en busca de problemas con el deterioro de la visión del color.
2. Compruebe si hay problemas que puedan afectar a los usuarios con discapacidad visual general.
3. Agregue atributos alternativos descriptivos a sus imágenes.
4. Revisa los subtítulos de tu video.

¿Tiene alguna pregunta sobre cómo hacer que su sitio web sea más accesible? ¡Hablemos de ellos en la sección de comentarios a continuación!

Imagen en miniatura del artículo de E.Druzhinina / shutterstock.com.