WordPress: Errores más comunes en accesibilidad web

¡Suscríbete a nuestra newsletter y recibe nuestras ofertas, novedades y descuentos directamente en tu email!

Introducción

La buena gente de mowomo me ha pedido que escriba una entrada sobre accesibilidad web para su blog, así que aquí va. Siempre viene bien recordar los puntos claves para hacer nuestras webs accesibles.

Para hacer hincapié en algo tan importante como es llevar a cabo la accesibilidad para tu sitio web, voy a  hacer una lista de los errores que todavía se siguen cometiendo en repetidas ocasiones y que se deberían solventar lo más rápido posible.

Ten en cuenta siempre la accesibilidad y la usabilidad web

Aunque accesibilidad y usabilidad son conceptos que pueden tener significados similares, no significan lo mismo, es decir, un sitio web:

• Puede ser accesible, pero no ser usable.
• Puede no ser accesible, pero sí usable.
• O puede darse el caso, de que no sea accesible ni usable. Ya se dice que un sitio si no es accesible no es usable.

¿Qué significa esto?

Por ejemplo, cuando un usuario tiene que rellenar un formulario pero no sabe dónde añadir su nombre porque los campos están en otro idioma.

Es decir, puede ser accesible si está bien etiquetado, pero no es usable, porque el usuario no entiende cuál es su función.

Estructuración de encabezados (sin saltos)

Una simple etiqueta de encabezado puede resultar un problema grave de accesibilidad para los lectores de pantalla. Si no lo tiene pasa desapercibido y es como si no existiera.

Yo utilizo el editor clásico, pero quien use Gutenberg tiene la lista de encabezados de manera jerarquizada y puede ver si hay un error de anidamiento. Saber que el encabezado de mayor nivel es el h1, el siguiente es un h2 y así hasta el h6. Es decir, después de un h2 viene un h3, no un h4. Esto es importante para el contenido. Lo establece las WCAG (Web Content Accessibility Guidelines) en el criterio 2.4.6. Encabezados y etiquetas.

Es importante no olvidar que si tenemos en nuestro sitio web regiones complementarias o barras laterales, también tienen que tener su propio encabezado, que es lo que se denomina encabezado de sección. Se recoge en el criterio 2.4.10 Encabezados de sección.

Formularios correctamente etiquetados

Imaginemos que estamos ante un formulario de registro donde se establecen algunos de los campos como requeridos con un asterisco, sin especificar previamente qué es lo que significa. Un ejemplo claro de ello, son los formularios que se realizan en Google: las encuestas que se realizan no son accesibles.

Puede darse el caso contrario: que un formulario no esté bien etiquetado, y por lo tanto, pase desapercibido para una persona que usa lector de pantallas. Por eso es importante el etiquetado correcto de los formularios, con la etiqueta label, tal y recoge la técnica H44. Usar los elementos label para asociar etiquetas con los controles de formulario.

O los formularios excesivamente largos, en los que el usuario tiene que introducir muchos datos, lo cual genera una mala experiencia de usuario que hace que se pierda y abandone la tarea.

Este formulario que expongo no es accesible ni usable. Es por eso que se requieren formularios simples y bien etiquetados.

Tener en cuenta el uso del color y contrastes

Para poder leer e interactuar con el contenido en un sitio web es muy importante usar los contrastes de color. Para las personas que tienen baja visión, hay que establecer contrastes altos entre el color de la letra y el fondo para que haya una buena legibilidad. Y también para las personas que tengan daltonismo. Criterio 1.4.1 Uso del color, Criterio 1.4.3 Contraste Mínimo, 1.4.6 Contraste (mejorado), Criterio 1.4.11 Contraste sin texto y 1.3.3 Características sensoriales, donde no se puede transmitir información sólo con el color.

La tipografía

Otra cuestión importante que hay que tener en cuenta es la tipografía, sin una buena tipografía no se puede disfrutar del contenido. Se recomienda un tamaño mínimo de 14 puntos, y para las personas con problemas cognitivos un tamaño máximo de 22 puntos para el título y un mínimo de 18 para el contenido. Ejemplos de tipografías legibles son las Sans Serif, como la Arial o la Verdana, son tipografías redondas y son agradables para la vista. Tener en cuenta también el espaciado de texto tal y como se recoge en el criterio 1.4.12. Espaciado de texto.

Hablando del contenido, es importante recordar que las abreviaturas tienen que escribirse completas para facilitar su compresión a las personas con problemas cognitivos. Se debe hacer la primera vez que se pone la abreviatura. Por ejemplo WCAG (Web Content Accesibility Guidelines), que traducida al español sería: Pautas de Accesibilidad al Contenido Web. Criterio 3.1.4 Abreviaturas.

Y no sólo es bueno para la lectura, sino también porque hay que tener en cuenta a las personas con dificultades cognitivas, que precisan de un mayor tamaño de letra para una mejor comprensión de la lectura. Hay que procurar que al hacer zoom no haya ningún elemento que resulte molesto para la lectura. Lo establece el criterio 1.4.4 Cambiar el tamaño del texto.

Mientras se está disfrutando de la lectura, el menú de navegación no puede bajar conforme leemos. Eso es muy muy molesto. Si se quiere intentar que las personas usuarias tengan una buena experiencia, basta con poner ENLACES para subir al comienzo de la página o para ir al pie de página. Se recomienda leer las técnicas G123 y G124.

Trabajar los enlaces

Para que una persona que usa lector de pantalla lo tenga más fácil a la hora de navegar por el sitio web, es importante conocer cómo trabajar los enlaces.

Si usamos un enlace de un sitio web determinado, el texto del enlace sería el del propio sitio web. El lector de pantalla lee al inicio https dos puntos barra barra uve doble uve doble uve doble punto… Por eso es importante poner el propio texto del enlace del sitio web. Criterio 2.4.4 Propósito de los enlaces (en contexto).

Si se introduce un enlace dentro de un párrafo tiene que tener sentido dentro del contexto para que se entienda su propósito. Hay que evitar los enlaces ambiguos, como «Pulsa aquí o «Más información». O por ejemplo, una lista de documentos en diferentes formatos. Criterio 2.4.9 Propósitos de los enlaces (sólo enlaces).

Con el lector de pantalla la persona usuaria navega a través de los encabezados, como ya comenté anteriormente y a través de los enlaces. Por eso es importante que los enlaces tengan sentido y faciliten la compresión y la navegabilidad. También se recomienda poner enlaces de salto a contenido. Criterio 2.4.1 Evitar bloques. Técnica G1 Agregar enlace que lleve directamente al al área de contenido principal.

Idioma

Hablando de enlaces, si tenemos un sitio multiidioma es importante que tanto en el origen como en el destino, el sitio esté en el idioma correspondiente así como los enlaces del sitio, tal y como establece el criterio 3.1.2 Idioma de las partes

También hay que establecer el idioma del sitio web para que el lector de pantalla lea en el idioma correspondiente. Criterio 3.1.1 Idioma de la página.

Accesibilidad de las imágenes

Un elemento importante del sitio web a tener en cuenta para la accesibilidad son las imágenes. Los navegadores como tal, son ciegos. Esto significa que si no se le pone una alternativa textual a las imágenes, pasan desapercibidas. Pues lo mismo ocurre para las personas que usan lector de pantalla. Como no pueden visualizar el contenido de las imágenes hay que añadirle una alternativa textual o una descripción más extensa, que no debe superar los 150 caracteres, en función del propósito de la imagen en cuestión. Esto sirve para las imágenes que aportan información, o que transmiten algo.

Pero hay imágenes que se ponen como simple decoración, es decir, son imágenes que no aportan nada y que están para decorar: se denominan imágenes decorativas y presentan un texto alternativo nulo.

Si estas imágenes se acompañan de un título en encabezado, el lector la lee sólo una vez. Es un error muy común poner texto alternativo a las imágenes decorativas y luego leer el título de encabezado. El lector lo lee dos veces.

En WordPress existen diferentes campos que permiten la descripción de las imágenes. Pero sólo hay que utilizar la de texto alternativo que es la importante. Si se le pone un título a la imagen y se también se le añade texto alternativo, es un texto alternativo duplicado.

Para todo esto hay que tener en cuenta el criterio 1.4.5 Imágenes de texto y el 1.4.9 Imágenes de texto (sin excepción) de las WCAG.

Foco de teclado

Para que las personas que tengan dificultades motoras y no puedan usar un ratón, es imprescindible tener el foco visible. Y no sólo eso, sino que aunque te aparezca debajo por donde estás navegando en letra pequeña, siempre puede haber lugar a confusión y eso genera una mala experiencia de usuario. Para las personas que además tengan problemas graves de visión el foco visible les facilita más la navegación porque así sabe dónde se encuentra. Criterio 2.4.7. Foco visible.

Y no puedo terminar este punto sin recordar que es importante establecer migas de pan para que la persona usuaria se oriente dentro del sitio. Criterio 2.4.8 Migas de pan.

También se le puede añadir un mapa del sitio, tal como establece la técnica G63. Proporcionar un mapa del sitio. Y la técnica G64. Proporcionar una tabla de contenido, que es muy útil para orientarse en un blog, si el sitio web dispone de él.

Contenido multimedia

Si el sitio web presenta contenido audiovisual como vídeos o audios, es importante que existan alternativas textuales que se correspondan con el contenido.

Por ejemplo, si tenemos un canal de Youtube donde estamos haciendo un curso, los vídeos tienen que estar subtitulados. Criterio 1.2.2 Subtítulos (pregrabados) y 1.2.4 Subtítulos (en directo).

Para todas aquellas personas a las que cueste seguir la lectura de un subtítulo por problemas de visión, es importante disponer de una descripción del contenido que se corresponda con el audio del vídeo. Criterio 1.2.1 Solo audio y sólo video (pregrabado) y Criterio 1.2.3. Descripción del audio o alternativa de medios (pregrabada). Lo mismo para los audios propiamente dichos. Esto ayuda a las personas con problemas de audición. Se recoge en el criterio 1.1.1 Contenido no textual.

Dentro del contenido no textual se incluyen los CAPTCHAS. Son muy inaccesibles. Tienen la letra distorsionada y es difícil leer los caracteres, lo que dificulta el acceso a personas con problemas de visión. Tienen una alternativa de audio que no es accesible para las personas con problemas de audición.

Aparte de la importancia de las alternativas textuales correspondientes, hay que añadir que si tratamos contenido multimedia, las personas usuarias tienen que tener control del audio, como subir y bajar el volumen o la velocidad de habla, que debe ser accesible por teclado. Se trata del criterio 1.4.2 Control del audio.

Espero que te haya gustado y hayas aprendido un poco sobre la accesibilidad web. Cuando se lance mowomo school, ofreceré cursos y talleres sobre este tema. Únete y te avisaremos cuando esté operativo.