Accesibilidad web para WordPress: Consejos

¿Cómo llevar a cabo la accesibilidad web en WordPress?

En WordPress, la accesibilidad web es muy importante. Para ello daré una serie de consejos para poner en práctica las WCAG 2.0 y 2.1.

Consejos sobre accesibilidad para WordPress

Consejos sobre accesibilidad web

En las WCAG 2.0 se establece en en el criterio 2.4.2 “Las páginas web describen su temática o propósito”. Todas las páginas web deben tener un elemento <title>. Es obligatorio. Además, el título es muy importante, sirve para identificar los resultados en Google, y por supuesto, mejora el posicionamiento de los sitios web.

Al igual que el título, los encabezados de una página también son importantes porque les va a permitir a las personas ciegas ojear el documento en el que están. Se recoge en el criterio 2.4.6 “Los encabezados o etiquetas describen el tema o propósito”. Esto ayuda a saber cómo está estructurada la información. Es muy útil para las personas que usan lector de pantallas (diversidad funcional visual), y para las que tienen diversidad funcional intelectual, porque les ayuda orientarse dentro de la web.

Por lo tanto, es muy importante, respetar la jerarquía de encabezados, sin saltos, es decir si pones un h2 en la siguiente sección coloca un h3, no un h4. Y sobre todo, separar el contenido de la presentación. HTML por un lado y CSS por otro.

El idioma del sitio, hay que establecerlo al inicio del documento con el atributo lang. En las WCAG 2.0 en el criterio 3.1.1 se establece el idioma de la página. “El idioma predeterminada de cada página puede ser determinado por software”.

Si el documento es HTML 4.01 o HTML 5, el idioma se marcará <html lang=”es”>

¿Cuándo usamos el cambio de idioma?

  • Cuando el cambio de idioma se produce en una o varias palabras. Para ello, usamos la etiqueta lang en el elemento <span>
  • <span lang="fr">je ne sais pas</span>

 

Si se trata de un sitio con múltiples idiomas, se usará el atributo hreflang, tanto en el origen como en el destino.

A la hora de trabajar con el contenido y el diseño de la web,  es recomendable usar tipografías claras, fundamentalmente, que sea Sans Serif. Se pueden usar también tipografías serifas, pero hay que tener cuidado porque algunas de ellas producen mala legibilidad y esto puede ser un problema de accesibilidad para las personas con dislexia.

Siguiendo con la tipografía se debe usar unidades relativas “em”, no absolutas. 1 em equivale a 16 ptos.

En las WCAG 2.0, en el criterio 1.4.4 Cambio de tamaño del texto: A excepción de los subtítulos y las imágenes de texto, todo el texto puede ser ajustado sin ayudas técnicas hasta un 200 por ciento sin que se pierdan el contenido o la funcionalidad”. En relación a esto, viene recogido en las técnicas C14, donde especifica el uso de unidades relativas (em) para la tipografía, y la C28 para los contenedores también en em.

En la encuesta realizada de Webaim, un 25% de los usuarios contestó que necesitaban una ampliación del texto de hasta el 400%.

Si hablamos de imágenes, hay que tener en cuenta dos cosas:

Si las imágenes aportan información, debemos poner textos alternativos.

  • <img src="imagen.jpg alt="texto alternativo">

Si las imágenes son decorativas, las cuales no aportan ningún tipo de información, se les pondrá texto alternativo nulo.

  • <img src="imagen.jpg" alt="">

 

Para las descripciones largas en las imágenes, hay que utilizar el atributo longdesc. El texto alternativo que se incluya a la imagen no puede superar los 150 caracteres.

Si quieres ampliar más información puedes leer la entrada: Cómo trabajar los textos alternativos para las imágenes.

Los enlaces tienen que tener un propósito, es decir, un destino claro y también deben tener sentido para que las personas ciegas se orienten dentro del sitio web. Un ejemplo de ello, es usar el propio texto del enlace. Evita enlaces ambiguos como “Pulsa aquí”, “Más información”.

En cuanto a los subtítulos, en el criterio de conformidad 1.2.2 de las WCAG 2.0: “Subtítulos (grabados): Se proporcionan subtítulos para el contenido de audio grabado dentro de contenido multimedia sincronizado, excepto cuando la presentación es un contenido multimedia alternativo al texto y está claramente identificado como tal.”.

Para los vídeos, hay que poner subtítulos que consten de dos líneas de texto como máximo y que contengan de 35 a 40 caracteres. Los subtítulos deben estar centrados en la parte inferior, excepto los efectos sonoros, que se incluirán en la parte superior derecha entre paréntesis. Los subtítulos deben aparecer el tiempo suficiente para poder ser leídos.  El interlineado debe ser sencillo y se debe usar una tipografía legible.

En Youtube, hay varias formas de añadir subtítulos.

  • Subir una transcripción o un archivo de subtítulos con tiempo. Es la opción más recomendable.
  • Escribir o pegar una transcripción del vídeo y los subtítulos se establecerán automáticamente.
  • Se pueden escribir los subtítulos mientras se ve el vídeo.

 

Para los audios, son muy importantes las transcripciones de texto, que sirven de apoyo a aquellas personas que no puedan visualizar ni oír bien un vídeo.

Para ampliar más información, puede leer la entrada Accesibilidad web: Diversidad funcional auditiva.

Funcionalidades dependientes de ratón:

En el criterio 2.1.1 se dice: “Teclado: Toda la funcionalidad del contenido es operable a través de una interfaz de teclado sin que se requiera una determinada velocidad para cada pulsación individual de las teclas, excepto cuando la función interna requiere de una entrada que depende del trayecto de los movimientos del usuario y no sólo de los puntos inicial y final.”

Si hay personas que no pueden usar el ratón, ya sea porque no le sea fácil manejarlo por sí mismos o porque hay personas que no ven, hay que hacer accesibles las opciones mediante teclado.

Para ello, es muy importante aplicar el criterio de conformidad 2.4.7 “Foco visible: Cualquier interfaz de usuario operable por teclado tiene una forma de operar en la cuál el indicador del foco del teclado resulta visible.” Esto ayudará mucho más a las personas ciegas, a las personas con baja visión y a las personas con problemas motrices a tener una buena navegación por la web mediante teclado.

Hablando de personas ciegas también hay que tener en cuenta las migas de pan, que se recoge en el criterio 2.4.8 de las WCAG 2.0: “Se proporciona información acerca de la ubicación del usuario dentro de un conjunto de páginas web”. En la técnica G65 se proporcionan ejemplos de ello.

En las WCAG 2.0, existen requisitos mínimos y máximos para trabajar con el contraste de color.

Criterio 1.4.3 (Contraste mínimo), que, para el tamaño normal, dice lo siguiente:

“La presentacion visual de texto e imágenes de texto tiene una relación de contraste de al menos, 4,5:1

Y en los textos grandes: “La presentacion visual de texto e imágenes de texto de gran tamaño, tienen una relación de contraste de al menos, 3:1

Criterio 1.4.6 (Contraste mejorado), que es más estricto para el tamaño grande, y establece que: “La presentacion visual de texto e imágenes de texto tiene una relación de contraste de al menos, 7:1

Y en los textos grandes: “La presentacion visual de texto e imágenes de texto de gran tamaño, tienen una relación de contraste de al menos, 4,5:1

Es importante destacar que hay personas con problemas de ceguera al color como los daltónicos y las personas con dislexia, que prefieren un color de fondo que no sea blanco puro.

También es muy importante hacer los formularios accesibles y usables para tener en cuenta a los usuarios que usan lectores de pantalla.

Y tengo que añadir algo más: las tablas no son muy recomendables porque dan problemas de accesibilidad, pero como todo, también se pueden hacer accesibles. Te recomiendo leer la entrada “Accesibilidad web: ¿Cómo hacer tablas accesibles?”.

Hay que utilizar dispositivos de apoyo como por ejemplo:

  • Lectores de pantallas (Jaws y NVDA: Windows) (VoiceOver: Iphone y Mac),
  • Magnificadores de pantalla (ZoomText),
  • Comprueba la accesibilidad por teclado siempre

 

Usa verificadores de ortografía y gramática para facilitar la comprensión y la lectura.

Utiliza analizadores de legibilidad de textos, para ayudar a las personas con diversidad funcional intelectual a tener una mejor comprensión del contenido.

 

Utiliza herramientas automáticas para chequear y testear webs:

Valida la sintaxis y las hojas de estilo CSS (Ej: Validador oficial del W3C).

Revisa siempre el contenido. (Todas las páginas).

Invita a los usuarios a hacer una retroalimentación en el sitio web para mejorar la accesibilidad y la usabilidad del sitio.

Si quieres más información puedes leer la entrada:

Requisitos de Usuario para la Accesibilidad de los Medios Audiovisuales

Y además, te recomiendo ampliar información sobre cómo hacer una navegación más accesible.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *