Cómo eliminar los dos errores graves principales de accesibilidad

En este tutorial exprés veremos cómo detectar y eliminar los dos errores graves principales de accesibilidad.

Como sabes, en Blogpocket estamos comprometidos con la mejora del nivel de accesibilidad web de los sitios que gestionamos. Lee nuestra declaración de accesibilidad.

Pero ¿cuáles son esos dos errores graves principales y cómo saber si en nuestro sitio web padecemos dichos errores?

Errores graves de accesibilidad web

WebAIM (Web Accessibility In Mind) proporciona un test para que sepamos fácilmente el detalle de todos los errores y alertas de accesibilidad.

WebAIM ofrece soluciones integrales de accesibilidad web desde 1999. Estos años de experiencia la han convertido en uno de los principales proveedores de servicios de accesibilidad web a nivel internacional. WebAIM es un centro de servicios sin fines de lucro de la Universidad Estatal de Utah.

La herramienta para evaluar el nivel de accesibilidad web (Web Accessibility Evaluation Tool) de WebAIM se denomina WAVE y puedes acceder a ella para realizar los tests de las páginas web de tu sitio. Te recomiendo, sin embargo, que instales la extensión para tu navegador porque te facilitará mucho la labor, será más rápido y evitarás posibles errores de sincronización.

En la imagen anterior se puede observar una captura de pantalla del test de Wave donde se aprecia el resumen de errores. Los errores graves se marcan en color rojo y se clasifican en dos apartados: «Errores» y «Errores de contraste». Estos serían en los que debemos enfocarnos principalmente con objeto de erradicarlos del sitio web.

En el apartado de «Errores», estarían fundamentalmente las imágenes sin texto alternativo; es decir cuando el código HTML de la imagen no lleva el correspondiente parámetro ALT.

Las etiquetas Alt, o descripciones de texto alternativas, son importantes tanto para la accesibilidad como para la optimización en motores de búsqueda (SEO), ya que proporcionan una descripción textual de una imagen para usuarios con discapacidad visual o para motores de búsqueda que no pueden interpretar las imágenes.

En el apartado «Errores de contraste» aparecen aquellos textos que pueden resultar de difícil lectura si el contraste del color del texto y el color del fondo es demasiado bajo.

En la imagen anterior, se muestra una captura de pantalla de un test de Wave en el que se observan los detalles de los errores de contraste. Haciendo clic en los iconos se accede al sitio exacto de la página en el que está el error, lo que facilita la detección del problema y su corrección inmediata.

Cómo corregir el problema de la falta de texto alternativo

Te sugiero dos acciones:

• Imágenes nuevas. Escribe siempre el texto alternativo. En WordPress, cuando subas la imagen cerciórate de que rellenas bien el texto alternativo con una descripción lo más exacta posible.
• Imágenes antiguas. Para las imágenes antiguas, si tienes paciencia, una posible solución es ir rellenando el texto alternativo. Si el número de imágenes es extenso, y si hablamos de WordPress, probablemente la única solución sea un plugin que sea capaz de rellenar de un golpe los alt de todas las imágenes. Para ello, hay dos opciones razonables: hacer que el texto del alt sea el nombre de la imagen, o hacer que el texto sea el título del post o página donde se encuentra dicha imagen. Existen mucho plugins en el directorio de WordPress pero Image Alt Text me gusta por su sencillez y eficacia. En la página del plugin, hay un vídeo de su funcionamiento.

Recuerda que sería deseable que el texto alternativo llevase la palabra clave. En rigor, el título del post o página; y el nombre de la imagen deberían llevarla también, así que si usas el plugin y has sido riguroso con el SEO, no habría problema.

Cómo corregir el problema del contraste bajo

Este problema se produce cuando existe un contraste muy bajo entre el texto y los colores de fondo. Un contraste de texto adecuado es necesario para todos los usuarios, especialmente para aquellos con baja visión.

La manera de solucionarlo es aumentar el contraste entre el color del primer plano (texto) y el color de fondo. El texto grande (superior a 18 puntos o 14 puntos en negrita) no requiere tanto contraste como el texto pequeño. En la Lista de verificación WCAG 2 de WebAIM se presentan las recomendaciones para implementar los principios y técnicas de accesibilidad más comunes para quienes buscan cumplir con las WCAG. El lenguaje utilizado aquí simplifica y condensa significativamente la especificación oficial de las WCAG 2.2 y los materiales de apoyo para facilitar su implementación y verificación en páginas web. La lista de verificación contiene enlaces a los criterios de cumplimiento oficiales. También está disponible una versión PDF de esta lista de verificación.

Resumen

En resumen, eliminar los errores graves de accesibilidad detectados en el test de WAVE redundará en una mejora sensible del nivel de accesibilidad web de nuestro sitio. Principalmente, hemos visto en este tutorial exprés, cómo detectar y eliminar los problemas de ausencia de texto alternativo en las imágenes junto con el bajo contraste en texto y fondos.

Ten en cuenta que todavía podrían existir otros errores y alertas de accesibilidad en tu sitio web. Sin embargo, resolver los errores clasificados por WAVE como graves, es un gran punto de partida.