Determinar si un sitio web hecho con WordPress es accesible no depende tanto del gestor de contenidos como de la forma de construirlo. En este artículo veremos algunas pautas para conseguir que un sitio web desarrollado con WordPress sea accesible.
¿Qué es la accesibilidad de un sitio web?
No existe una definición formal de la accesibilidad de un sitio web. En principio podría parecer que un sitio web es accesible si puede ser manejado con eficacia por personas con algunos tipos de discapacidad. Sin embargo, debemos de entender la accesibilidad como un concepto más amplio vinculado también a las tecnologías disponibles y a las habilidades de las personas que acceden al sitio web.
Por ejemplo, estamos acostumbrados a acceder a sitios web con navegadores modernos, capaces de interpretar y mostrar contenidos de gran riqueza y con “efectos especiales”. Sin embargo, no todo el mundo es capaz de acceder a estos contenidos con ese tipo de navegadores, ya sea porque utilizan equipos antiguos o navegadores especiales debido a alguna discapacidad.
La medida de la accesibilidad de un sitio web
La Web Accessibility Initiative (WAI) es un grupo del World Wide Web Consortium (W3C) que se encarga de elaborar unas guías de accesibilidad de sitios web. Para ello ha establecido tres niveles de accesibilidad (A, AA, AAA) en función del nivel de cumplimiento de sus recomendaciones. En 2012 se estandarizaron las Pautas de accesibilidad al contenido web 2.0, también conocidas como WCAG 2.0.
Pero, ¿cómo sabemos si nuestro sitio web es accesible y cumple esas pautas? En España existe una iniciativa que nos ofrece un sistema de evaluación de nuestro sitio web. Es el TAW, desarrollado por la Fundación CTIC Centro Tecnológico de Gijón y nos ofrece en su sitio web, una herramienta para hacer dicha evaluación: Tawdis.
Dicha herramienta nos permite tener una visión de los aspectos a mejorar para que cumplamos los requerimientos del nivel AA del WCAG 2.0.
La accesibilidad en WordPress
WordPress ofrece una serie de recursos para la mejora de la accesibilidad y que ha convertido en estándares para todo el código que se integra en el propio gestor de contenidos, así como en los desarrollos de terceros (plantillas y plugins).
Por otra parte, ofrece acceso a sitios web con herramientas para verificar los niveles de cumplimiento de la accesibilidad.
Aunque, como hemos dicho, WordPress ofrece información sobre accesibilidad para desarrolladores de temas y plugins, ésta no es siempre seguida y, en muchas ocasiones, tendremos que hacer uso de nuestros propios conocimientos y de alguna herramienta adicional, como el plugin WP Accessibility, que nos sacará de muchos apuros.
Recomendaciones de accesibilidad en WordPress
A continuación, veremos algunas de las recomendaciones que deberíamos seguir para desarrollar un sitio web accesible con WordPress.
Descripciones en las imágenes
Muchos usuarios utilizan navegadores “solo texto”, como Lynx, que no es capaz de interpretar imágenes. Por este motivo, debemos de incluir una descripción de la imagen en forma de texto alternativo (alt) o, incluso, en forma de descripción larga (longdesc), que es un enlace interno o externo a un texto con una descripción más completa del contenido de la imagen.
Anidamiento de encabezados
Los encabezados son etiquetas que permiten organizar jerárquicamente el contenido en distintos niveles. El primer nivel, descrito mediante la etiqueta H1, debe ser único. Luego podremos tener encabezados de distintos subniveles (H2…H6) que deben estar correctamente anidados, es decir, que un encabezado H2 podrá contener varios encabezados H3 y éstos, a su vez, varios del tipo H4. Además, cada encabezado debe contener algún tipo de contenido ya que los encabezados definen secciones de contenido.
Campos de formularios
Los campos de un formulario deben estar etiquetados, generalmente con la etiqueta label for. Ello permite describir el contenido del campo del formulario. Yo suelo utilizar el plugin Contact Form 7 para crear formularios. Sin embargo, este plugin no formatea los campos de modo accesible. Para solucionarlo existe un plugin adicional Contact Form7: Accesible Defaults, que debe instalarse antes del Contact Form 7 y que hace que los formularios creados sean accesibles.
Enlaces con descripciones
Cualquier enlace que creemos en el sitio web debe de tener un contenido descriptivo. No vale eso de “pinche aquí” o similares, sino que el texto del enlace debe ser suficientemente representativo del contenido al que dirige el enlace.
IFRAMEs con título
Si incluimos objetos a través de iframes, por ejemplo, mapas de Google, debemos de incluir el atributo “title” y su descripción. En el caso de los mapas, este atributo debería incluir un title con, por ejemplo, “situación de la empresa”.
Iconos accesibles
El caso de los iconos es similar al de las imágenes. En un sitio web solemos colocar dos tipos de iconos: ornamentales (equivaldrían a una imagen) y funcionales, como los de redes sociales, que enlazan con otras páginas.
En muchas ocasiones se utilizan los iconos de la tipografía Font Awesome que, por defecto, los coloca como una etiqueta <i>. TAW no reconoce esta etiqueta, pero sustituyéndola por la etiqueta <span>, logramos el mismo efecto y sí que es validada por TAW. Además, debemos asegurarnos que incluimos el atributo aria-hidden=»true».
Pero esto no es suficiente. Si el icono enlaza con otra página, por ejemplo, una red social, debemos de colocar una palabra o frase dentro del mismo enlace del icono. Esto tiene su lógica, ya que el icono no es interpretable por sí mismo. Podemos poner, por ejemplo, el icono de Facebook, pero debemos poner también la frase “Síguenos en Facebook” para tener un enlace perfectamente descrito.
Contraste de pantalla
Algunas combinaciones de color habitualmente utilizadas en el desarrollo de sitios web no ofrecen el suficiente contraste (diferencia entre el color frontal y el del fondo) para personas con discapacidades visuales, por ejemplo, daltónicos.
Es conveniente utilizar alguna herramienta de valoración de contraste para mejorar la legibilidad del sitio web, como Contrast Checker.
Otro aspecto que facilita o dificulta la visualización es el tamaño de la letra, aunque muchos de los navegadores actuales permiten realizar zoom o aumentar los tamaños de las tipografías.
Mapa del sitio
En este caso no me refiero a sitemap que se utiliza para enviar a Google Search Console, para facilitar la indexación del sitio web, sino a una página que contiene el mapa del sitio, es decir, una página que contiene una estructura de enlaces a todas y cada una de las páginas que forman el sitio web.
Afortunadamente, disponemos de un plugin para realizar esto: WP Sitemap Page.
Conclusión
La accesibilidad es un aspecto importante a considerar a la hora de desarrollar un sitio web, si bien es cierto que puede generar una carga de trabajo adicional y, en cierto modo, limita la creatividad del desarrollador.
Como compensación, más personas podrán acceder exitosamente a nuestro sitio web y, en cierto modo, tendrá su compensación en un mejor posicionamiento.
