Accesibilidad en WordPress: Crear y probar la accesibilidad en WordPress

Cuando se diseña un sitio web, es importante pensar en la audiencia. Si no optimizas el sitio para una variedad de usuarios, limitarás quién puede ver tu contenido. Si no piensas activamente en la accesibilidad de WordPress, puedes hacer que los usuarios abandonen rápidamente tu sitio y no vuelvan nunca más.

Centrarse en la accesibilidad en WordPress permite a más personas navegar e interactuar con el sitio. Con un diseño accesible y características inclusivas, la experiencia general del usuario (UX) puede mejorar para las personas con discapacidad.

En este artículo, analizaremos las opciones de accesibilidad de WordPress y cómo implementarlas en tu sitio web. A continuación, te mostraremos cómo probar las nuevas funciones antes de publicar tu contenido. ¡Empecemos!

Introducción a la accesibilidad de WordPress

Por ejemplo, una combinación de colores sencilla y contrastada permitirá a los usuarios daltónicos leer el contenido con facilidad. Además, como otros visitantes no pueden utilizar el ratón, puedes hacer que tu sitio web sea navegable sólo con el teclado.

Tras la aprobación de la Ley de Estadounidenses con Discapacidades (ADA), la accesibilidad web pasó a ser obligatoria por ley. Si eres un desarrollador o propietario de un sitio web, debes tener en cuenta las Pautas de Accesibilidad al Contenido en la Web (WCAG) al diseñar tus páginas.

Por ejemplo, el contenido tiene que ser:

• Perceptible: Los usuarios en línea deben ser capaces de discernir la información de una página web, incluso cuando utilizan una tecnología de asistencia como un lector de pantalla.
• Operable: Un sitio web debe ser fácil de navegar, tanto si los visitantes utilizan un ratón, un teclado o comandos de voz.
• Comprensible: Tu contenido tiene que ser legible y fácil de entender.
• Robusto: Los usuarios deben poder acceder a tu contenido con una amplia variedad de tecnologías, incluyendo dispositivos móviles, navegadores y lectores de pantalla.

Cuando se trata de WordPress, las opciones de accesibilidad pueden ser un éxito o un fracaso. Aunque el equipo de accesibilidad de WordPress siempre evalúa el software principal, los temas y los plugins, no hay garantía de que estas características sean compatibles.

Básicamente, los desarrolladores y creadores de contenidos son responsables de seleccionar sus propios conjuntos de herramientas de accesibilidad. Esto puede requerir tiempo y esfuerzos adicionales, pero ofrece muchas ventajas:

• Permitir que un amplio abanico de usuarios vea tu contenido
• Mejorar la experiencia general del usuario para las personas con discapacidad
• Ayudar a establecer confianza con tu audiencia

En definitiva, lo que quieres es que todo el mundo pueda acceder a tu sitio web de WordPress. Muchos sitios web excluyen a los usuarios con discapacidades visuales o de otro tipo, pero debes tenerlos en cuenta activamente durante el proceso de desarrollo y diseño.

¿Cuáles son las principales características de la accesibilidad web?

Tendrás que trabajar en varias características a la hora de hacer tu sitio accesible. Entre ellas:

• Navegación: Los visitantes deben acceder a cualquier parte del sitio web utilizando sólo sus teclados o tecnologías de asistencia.
• Texto alternativo: Utiliza un texto descriptivo para los usuarios con discapacidades visuales para que puedan acceder a la información utilizando lectores de pantalla.
• Combinación de colores: La paleta de colores debe tener tonos contrastados que hagan más legible el contenido.
• Fuente: Todo el texto del sitio web debe tener un tamaño mínimo de 16 píxeles y utilizar un estilo de letra legible.

Aunque no se pueden tener en cuenta todas las circunstancias, estas características pueden garantizar que un mayor número de personas puedan participar en su sitio web.

8 tips para la accesibilidad de WordPress

Ahora que hemos visto la importancia de la accesibilidad web, vamos a hablar de cómo optimizar tu sitio web para que cumpla estas directrices.

1. Seleccionar el tema de WordPress adecuado

A la hora de diseñar un sitio web, es posible que tengas la tentación de elegir uno de los mejores temas gratuitos de WordPress. Aunque muchas opciones son populares, asequibles y están bien diseñadas, esto no significa que sean accesibles.

Algunos temas pueden dificultar la visualización del contenido a personas con discapacidad. Por ejemplo, un esquema de colores por defecto puede tener tonos similares, lo que significa que los usuarios daltónicos no podrán identificar la diferencia.

Sin embargo, encontrarás varios temas preparados para la accesibilidad en WordPress. Estas opciones han pasado una auditoría de accesibilidad, proporcionando características adicionales para una fácil navegación y una clara visibilidad.

Estas son algunas de las características básicas que deberías buscar en un tema accesible:

• Navegación con el teclado
• Estructura de encabezamiento HTML razonable
• Combinación de colores contrastada

Cuando busques un tema de WordPress preparado para la accesibilidad, puedes limitar tus opciones utilizando un filtro. En el Directorio de Temas, simplemente haz clic en Filtro de Características y selecciona Preparado para accesibilidad.

Después de aplicar el filtro, podrás ver todos los temas que cumplen con los requisitos de accesibilidad de WordPress. Muchas de estas opciones tendrán un diseño sencillo y ofrecerán soporte para las tecnologías de asistencia.

Sin embargo, es importante tener en cuenta que estos temas sólo deben cumplir los requisitos mínimos de accesibilidad. Es posible que un tema concreto no tenga en cuenta los distintos grados de discapacidad y sus necesidades específicas. Para asegurarte de que un tema es adecuado para ti, tendrás que leer la descripción y evaluar las características de accesibilidad que ofrece.

2. Añadir características funcionales con plugins

Otra solución sencilla es utilizar los plugins de accesibilidad de WordPress. Cuando se instala un plugin de WordPress, se puede potenciar automáticamente la accesibilidad del sitio sin necesidad de realizar ningún tipo de mantenimiento.

Cuando se trata de accesibilidad, hay dos tipos de plugins que pueden ayudar: algunos están diseñados para ayudarte a crear contenido accesible, mientras que otros pueden hacer que un sitio web existente sea más inclusivo.

Puedes encontrar un plugin de cumplimiento de la ADA para WordPress aplicando el filtro adecuado. Si utilizas el directorio de plugins, asegúrate de buscar los resultados con la etiqueta de plugin de «accessibility«.

Uno de los mejores plugins de WordPress para la accesibilidad es One Click Accessibility.

Una vez que hayas construido tu sitio, esta herramienta puede añadir nuevas funciones para que cualquiera pueda ver el contenido. Por ejemplo, habilitar una función de salto al contenido para los usuarios de teclado y alterar el esquema de colores con contraste negativo, fondo claro u opciones de escala de grises.

3. Describir las imágenes con texto alternativo (Alt Text)

Las imágenes son tan importantes para un sitio web como cualquier otro tipo de contenido. De hecho, a menudo son preferibles a los bloques de texto, ya que pueden proporcionar la información necesaria de forma instantánea y más creativa.

Cuando se lee con lectores de pantalla, un texto alternativo (alt text) bien escrito (también conocido como etiquetas (alt tags) o descripciones (alt descriptions)) puede proporcionar información similar sobre la imagen a una persona con discapacidad visual, percibiendo plenamente el contenido del sitio.

Los textos alternativos también juegan un papel importante en el SEO de WordPress, ya que los motores de búsqueda los utilizan para obtener resultados de búsqueda. Por lo tanto, el cuidado de las descripciones alternativas es algo que no debe pasarse por alto.

Después de subir una foto en WordPress, ve a los detalles del adjunto en la parte derecha de la página. Aquí verás las opciones para añadir un título, una leyenda, una descripción y un texto alternativo.

Para el texto alternativo, asegúrate de escribir una descripción de la imagen sin sobrepasar el límite de palabras (unos 125 caracteres). Dado que los motores de búsqueda también utilizan esta información para entender la imagen, no olvides incluir las palabras clave de destino para mejorar tu posicionamiento. 

Aunque los pies de foto son opcionales, pueden proporcionar información adicional a los lectores. Mientras que el texto alternativo debe ser corto y descriptivo, puedes entrar en más detalles en los pies de foto.

Añadir texto alternativo y subtítulos a las imágenes puede ser una forma sencilla de hacer que tu sitio de WordPress sea más accesible. Incluso si los usuarios no pueden ver físicamente estos elementos visuales, pueden entenderlos escuchando sus descripciones.

Otro plugin de accesibilidad de WordPress muy útil es Bulk Auto Image Alt Text.

Como su nombre indica, esta herramienta permite añadir automáticamente texto alternativo a varias imágenes a la vez. Genera etiquetas alt a partir de nombres de imágenes, encabezados de publicaciones o palabras clave, y es compatible con Yoast SEO y WooCommerce.

4. Utilizar fuentes legibles

Cuando se diseñan contenidos en línea, es posible que no se consideren las fuentes como un problema de accesibilidad. Sin embargo, un estilo y un tamaño de letra incorrectos pueden dificultar la lectura del contenido.

Si eliges un tipo de letra personalizado y decorativo, como un estilo cursivo, algunas personas podrían tener dificultades para entenderlo. Por lo tanto, es mejor optar por estilos sencillos y fáciles de leer, como Calibri, Arial y Times New Roman.

Otro elemento a tener en cuenta es el tamaño de la fuente. Por lo general, el tamaño de la fuente accesible debe ser de al menos 16 píxeles. Si tus lectores tienen una visión limitada, también necesitarán poder hacer zoom o cambiar el tamaño de la pantalla.

Cuando se utiliza un tema en bloque, se pueden editar las fuentes del sitio utilizando el Editor del Sitio. En tu escritorio de WordPress, abre Apariencia -> Editor. Luego, selecciona Tipografía.

A continuación, haz clic en el elemento Texto. Esto abrirá las opciones de personalización para el estilo y el tamaño de la fuente.

Para activar el cambio de tamaño de las fuentes, utiliza un plugin como Zeno Font Resizer.

Con esta herramienta, puedes permitir a los visitantes ajustar el tamaño de la fuente a su preferencia. Además, el plugin utiliza cookies para guardar las preferencias del usuario.

5. Seleccionar colores de contraste

Al personalizar la combinación de colores de tu sitio web, es importante tener en cuenta a los espectadores potencialmente daltónicos. Si eliges colores con tonalidades muy parecidas, las personas con poca visión podrían no ser capaces de distinguirlos.

Si seleccionas colores que contrasten, cualquier visitante podrá leer fácilmente tu contenido. A menudo, el texto negro con un fondo blanco es la opción más preferible por su llamativo contraste.

Afortunadamente, WordPress te avisará automáticamente si intentas utilizar tonos de color similares. Cuando detecte una combinación de colores difícil de leer, te sugerirá un fondo oscuro y una combinación de colores brillantes en su lugar.

También puedes utilizar el comprobador de contraste de WebAIM para encontrar colores accesibles para tu sitio web. Esta herramienta permite probar diferentes combinaciones de tonos y ver si tienen suficiente contraste.

Después de elegir los colores, el Comprobador de Contraste de WebAIM dará una relación de contraste. Si los colores tienen una relación de al menos 4,5:1, pasarán los requisitos de accesibilidad WCAG. Además, puedes previsualizar los colores elegidos y decidir si son adecuados para tu sitio web.

6. Añadir encabezados

Cuando escribas nuevas entradas, tendrás que organizarlas con títulos adecuados. Al dividir el texto en diferentes secciones, tu contenido será más fácil de leer y comprender.

Nadie quiere leer una sección larga de texto sin pausas. Por lo tanto, los títulos y el espaciado adecuado pueden ser una forma eficaz de mantener a los lectores atentos. Especialmente si tus espectadores tienen problemas de aprendizaje, añadir títulos puede evitar que se frustren y abandonen el sitio por completo.

El Editor de Bloques de WordPress hace que sea fácil añadir y organizar los encabezados para tu sitio web. Solo tienes que añadir un nuevo bloque de encabezado y elegir el tamaño que quieres que tenga.

Después de modificar el formato de los títulos, puedes comprobar si tienen el tamaño correcto. Para ello, haz clic en el botón Detalles de la esquina superior izquierda. Si el nivel de los encabezados es incorrecto, WordPress proporcionará un mensaje de alerta.

Al añadir encabezados adecuados a tus entradas, animarás a los visitantes a leer una entrada de principio a fin. Esto, a su vez, reducirá la tasa de rebote y aumentará la interacción de los usuarios.

7. Utilizar textos de anclaje descriptivos

Otra forma de aumentar la accesibilidad de WordPress es etiquetar los enlaces. Al escribir una entrada, es posible que desees incluir enlaces externos e internos para dirigir a los usuarios a diferentes webs. Sin embargo, si simplemente utilizas «haz clic aquí» como texto ancla (anchor text), esto no describirá el destino del enlace.

Si tu audiencia utiliza lectores de pantalla, es una buena idea hacer que el texto de anclaje sea más descriptivo. De este modo, los usuarios sabrán exactamente en qué están haciendo clic antes de entrar.

Por ejemplo, puedes querer dirigir a los usuarios a realizar cursos online. Al anclar el enlace de la página con «mis cursos«, informará a los espectadores a dónde conduce el enlace.

También puedes añadir botones para resaltar los enlaces y facilitar su lectura. Para ello, basta con insertar un bloque de botones en el editor de entradas.

A continuación, escribe una breve descripción que especifique a dónde conduce el enlace. Al editar el texto y el color de fondo del botón, puedes establecer tonos contrastados que sean fáciles de leer.

En resumen, es conveniente que todos los enlaces del sitio web estén bien descritos y diseñados. Cuando los visitantes utilizan lectores de pantalla, un texto de anclaje descriptivo puede informarles del destino de un enlace. Esto les permite navegar por el contenido sin demasiada dificultad.

8. Escribir subtítulos y transcripciones para vídeos

Si tu sitio web contiene vídeos, es esencial que esto también sea accesible. Para los lectores con dificultades de audición o de procesamiento auditivo, puedes crear subtítulos y transcripciones de los vídeos. Esto les ayudará a entender el contenido con claridad.

Una de las formas más sencillas de añadir un vídeo a WordPress es insertando un bloque de YouTube. Afortunadamente, YouTube tiene una función de subtítulos automáticos. Esto puede ahorrarte el tiempo de crear los subtítulos tú mismo.

Para los vídeos más largos, considera la posibilidad de crear una transcripción. Esto implica traducir cada palabra hablada en un vídeo a un documento escrito.

Las transcripciones pueden ayudar a los lectores a entender todo lo que ocurre en el vídeo. Si publicas vídeos de podcast, convertirlos en una transcripción proporciona una útil guía de escucha.

Una vez que hayas decidido escribir una transcripción, escríbela en un post de WordPress. Esta puede ser una opción sencilla si eres un buen oyente y escribes rápido.

Sin embargo, también existe un útil software de transcripción para procesar el vídeo. Con una herramienta como VEED.IO, puedes subir un archivo de audio y convertirlo en texto con un solo clic.

Esta herramienta puede auto-transcribir un archivo de audio y traducirlo a más de 100 idiomas. También tiene la opción de editar la transcripción antes de descargarla.

Cómo probar la accesibilidad de WordPress

Una vez que hayas creado un sitio web, es importante probar su accesibilidad. Es importante que te asegures de que todas las funciones operan correctamente antes de lanzarla.

Una forma sencilla de hacerlo es realizar pruebas automáticas. Esto implica pasar el sitio web por una herramienta de evaluación de la accesibilidad para ver su rendimiento.

Una herramienta popular para probar la accesibilidad de WordPress es WAVE. Tras introducir la URL de tu sitio web, WAVE te dará un resumen de las características de accesibilidad disponibles, así como una lista de mejoras que puedes realizar.

Cuando navegas por la ventana de vista previa de tu sitio, haz clic en los iconos de alerta para las áreas de mala accesibilidad. WAVE te notificará cualquier error de contraste, niveles de encabezamiento omitidos o enlaces redundantes.

Por otro lado, la pestaña de Structure te indicará si tu contenido es fácil de navegar.

Aunque esta herramienta puede ser muy útil, es posible que no detecte todos los problemas de accesibilidad. Por lo tanto, es posible que también quieras considerar la posibilidad de probar manualmente el sitio web.

Para realizar una prueba manual, dirígete a la portada de tu sitio web e intenta navegar por el contenido como si fueras un nuevo visitante. En primer lugar, comprueba si hay elementos parpadeantes o en movimiento que puedan distraer o confundir a los usuarios. A continuación, evalúa si el tamaño de la letra y la combinación de colores son fácilmente legibles.

Aquí tienes algunos consejos adicionales para realizar una prueba manual:

• Asegúrate de que puedes navegar por el sitio utilizando sólo el teclado
• Utiliza un lector de pantalla para saber cómo suena tu contenido cuando se lee en voz alta
• Prueba la función de cambio de tamaño de las fuentes

Una vez que el sitio web se haya puesto en marcha con éxito, es posible que quieras conocer la opinión de tus visitantes. Si recibes comentarios sobre cómo hacer el contenido más accesible, intenta aplicar estos cambios.

Conclusión

Centrarte en las características de accesibilidad puede ser la clave para retener a tus visitantes online. Si tienes en cuenta a las personas con discapacidades, puedes ofrecerles fácilmente alternativas. Esto ayudará a establecer la confianza con los lectores y hará que vuelvan a por nuevos contenidos.

Para repasar, he aquí algunas formas de hacer que tu sitio de WordPress sea más accesible:

1. Seleccionar un tema adecuado
2. Añadir características funcionales utilizando los plugins de WordPress
3. Describir las imágenes con texto alternativo
4. Utilizar fuentes legibles
5. Seleccionar colores que contrasten para el diseño del sitio web
6. Incluir títulos para los fragmentos de texto más largos
7. Etiquetar claramente los enlaces
8. Escribir subtítulos y transcripciones

Esperamos que esta guía te haya ayudado a simplificar la accesibilidad de WordPress para que puedas poner el sitio web a disposición de todo tipo de visitantes. Asegúrate también de utilizar el alojamiento de WordPress para que la experiencia sea más fluida.

Accesibilidad de WordPress – Preguntas frecuentes

Hasta ahora, hemos hablado de algunas formas prácticas de hacer que tu sitio sea más accesible. Ahora, vamos a ver algunas preguntas comunes sobre el cumplimiento de la ADA en WordPress.