Cómo mejorar la accesibilidad en tu sitio de WordPress

¿Alguna vez te has imaginado visitar un sitio web y darte cuenta de que simplemente no podías leer el texto, usar los menús o entender algo en absoluto? Es difícil de creer, pero esta es la realidad para muchas personas con discapacidades todos los días.

Cuando las personas crean sitios web, la accesibilidad es algo que a menudo se pasa por alto. Pero realmente no debería ser así, porque puede crear una barrera entre tu contenido y muchos de tus visitantes. En nuestra experiencia, cuando un sitio web no es accesible, puede sentirse realmente poco acogedor e incluso exclusivo.

Asegurarse de que tu sitio sea accesible no se trata solo de seguir las reglas, sino también de garantizar que todos tengan una gran experiencia en tu sitio. Se trata de ser inclusivo y brindar una experiencia de usuario excepcional para todos tus visitantes, sin importar sus necesidades o habilidades.

Entonces, si estás listo para que tu sitio web sea acogedor para todos, te mostraremos cómo mejorar la accesibilidad de tu sitio de WordPress paso a paso.

¿Por qué es importante la accesibilidad para mi sitio de WordPress?

En el diseño web, la accesibilidad se refiere a las técnicas utilizadas para hacer que un sitio web sea más fácil de usar para personas con discapacidades. Algunos visitantes utilizan tecnologías de asistencia para navegar por la web, como lectores de pantalla para personas con discapacidades visuales y navegación por teclado para personas que no pueden usar un ratón.

Existen algunas mejores prácticas recomendadas por expertos para hacer que los sitios web sean más accesibles. Ayudan a que los sitios sean más inclusivos y fáciles de usar para todos, independientemente de sus capacidades.

Al priorizar la accesibilidad, más personas podrán navegar por tu sitio web de WordPress y explorar tu contenido. Si tienes una tienda en línea, también aumentarás tus posibilidades de convertir usuarios en clientes.

La accesibilidad también es importante para la optimización de motores de búsqueda (SEO). Google valora los sitios web con buena usabilidad. Además de hacer que tu sitio web sea más receptivo para dispositivos móviles, también puedes priorizar la inclusión en el diseño de tu web para mejorar las clasificaciones.

Además, si eres propietario de un sitio web de negocios y la parte frontal de tu sitio es inaccesible, podrías enfrentar consecuencias legales.

La Ley de Estadounidenses con Discapacidades (ADA) establece que los consumidores pueden presentar una queja si un sitio no cumple con las pautas de accesibilidad. Es más, tu reputación podría arruinarse, lo que podría resultar en pérdidas financieras.

¿Cómo hace WordPress que mi sitio web sea más accesible?

WordPress tiene varias funcionalidades integradas para ayudar a los usuarios a hacer que sus sitios web de WordPress sean accesibles. Por ejemplo, por defecto, puedes agregar texto alternativo (texto alt) y atributos de título a las imágenes para que los lectores de pantalla puedan leerlos en voz alta para usuarios con discapacidades visuales.

WordPress también ha hecho obligatorio que todo el código nuevo y actualizado en WordPress siga sus estándares de codificación de accesibilidad. Esto es para asegurar que los desarrolladores de WordPress cumplan con las mejores prácticas de accesibilidad al crear temas y plugins.

Aparte de eso, WordPress incluye funciones que facilitan a los usuarios con discapacidades la creación de sus propios sitios web, como el modo de accesibilidad para agregar widgets.

Para más información, te recomendamos seguir la etiqueta de Accesibilidad en la página de Make WordPress Core para más detalles.

Con todo esto en mente, WordPress no es completamente accesible de fábrica. Como propietario de un sitio web, es importante tomar medidas adicionales para ayudar a que tu sitio cumpla con los estándares de accesibilidad.

Hemos dividido esta guía en algunos consejos sencillos para mejorar la accesibilidad de tu sitio web de WordPress. Puedes usar estos enlaces rápidos para navegar a una sección específica:

1. Familiarízate con las Pautas de Accesibilidad para el Contenido Web (WCAG)
2. Usa un Tema de WordPress Listo para Accesibilidad
3. Instala un Plugin de Accesibilidad para WordPress
4. Verifica el Contraste de Color de tu Sitio Web
5. Agrega Texto Alternativo y Atributos de Título a las Imágenes
6. Agrega Etiquetas a Todos los Campos del Formulario
7. Usa Etiquetas de Encabezado Adecuadas en tu Contenido
8. Usa Texto de Anclaje Descriptivo
9. Agrega Subtítulos o Transcripciones al Contenido de Video y Audio
10. Realiza Pruebas de Usabilidad y Accesibilidad
11. Guías Expertas sobre Accesibilidad en WordPress

1. Familiarízate con las Pautas de Accesibilidad para el Contenido Web (WCAG)

Primero lo primero, te recomendamos leer las Pautas de Accesibilidad para el Contenido Web (WCAG). Estos son los estándares establecidos por la Iniciativa de Accesibilidad Web (WAI) del W3C para que los usuarios hagan sus sitios web más accesibles.

Puedes consultar las actualizaciones de WCAG 2.1 y WCAG 2.2 para empezar. Si ambos documentos te parecen demasiado largos para leer, siéntete libre de marcar esta referencia rápida en su lugar.

2. Usa un Tema de WordPress Listo para Accesibilidad

Los temas listos para accesibilidad han cumplido con los estándares mínimos de accesibilidad que el equipo de revisión de temas de WordPress ha establecido.

Usar un tema de WordPress accesible no significa que tu sitio web cumplirá automáticamente con todos los requisitos de accesibilidad, ya que aún tendrás que hacer algunos ajustes por tu cuenta. Sin embargo, puede darte un buen comienzo para hacer que tu sitio web sea más accesible.

Como mínimo, un tema listo para accesibilidad tendrá:

• Menús que se pueden navegar solo con el teclado.
• Buen contraste de color que hace que el contenido sea legible para usuarios con discapacidades visuales.
• HTML semánticamente correcto, lo que ayuda a las tecnologías de asistencia a comprender el contenido y la estructura de una página web.

Si quieres ir un paso más allá, también puedes verificar si el tema tiene atributos ARIA. Estos atributos son como información adicional que complementa el HTML de tu tema para hacer que un sitio web sea aún más fácil de navegar para las tecnologías de asistencia.

La forma más fácil de buscar un tema listo para accesibilidad es yendo a Apariencia » Temas en tu panel de WordPress. Luego, haz clic en ‘Añadir nuevo tema’.

Desde aquí, selecciona ‘Filtro de características’ y elige ‘Accesibilidad lista’.

Siéntete libre de añadir más filtros para encontrar el tema que se ajuste a tus necesidades exactas.

Ahora, desplázate hacia abajo y haz clic en ‘Aplicar filtros’.

Verás entonces algunos temas listos para accesibilidad en la pantalla.

Para más recomendaciones de temas, consulta nuestras selecciones de expertos de los mejores temas de WordPress.

3. Instala un plugin de accesibilidad para WordPress

Un plugin de accesibilidad para WordPress agrega funciones útiles para que los visitantes con discapacidades naveguen por tu sitio web.

Un plugin de accesibilidad para WordPress que recomendamos es WP Accessibility. Algunas de las cosas que este plugin puede hacer incluyen:

• Agregar una barra de herramientas de accesibilidad
• Detectar si tu tema está listo para accesibilidad
• Rastrear cómo se utilizan las funciones de accesibilidad en tu sitio web para que puedas evaluarlas

Primero, necesitas instalar y activar el plugin en WordPress.

Después de la activación, debes ir a Ajustes » WP Accessibility para configurar el plugin.

Echemos un vistazo a cada sección de la página de ajustes.

Agregar enlaces para omitir

En la primera sección de los ajustes del plugin, puedes usar enlaces para omitir en tu sitio web, y esta opción está habilitada por defecto. Un enlace para omitir permite a los usuarios saltar directamente a la sección de contenido de una publicación o página.

Esta es una función extremadamente útil para las personas que usan lectores de pantalla. Sin un enlace para omitir, tendrán que escuchar todo lo que se muestra en tu sitio web, incluidos tus menús de navegación, antes de llegar a la parte del contenido.

Si tu tema ya utiliza enlaces para omitir, verás una notificación que lo confirma.

Barra de herramientas de accesibilidad

El plugin WP Accessibility viene con una barra de herramientas de accesibilidad.

Al habilitarlo, el plugin agregará una barra de herramientas en tu sitio web donde los usuarios pueden redimensionar fuentes o ver tu sitio en modo de color de alto contraste.

Esto permite a tus usuarios seleccionar las opciones que necesitan para hacer la página más fácil de leer.

Para habilitar la barra de herramientas, simplemente marca las casillas 'Tamaño de fuente' y 'Contraste'.

También hay configuraciones donde puedes controlar el tamaño de fuente y la ubicación de la barra de herramientas.

Si realizas cambios en estas configuraciones, asegúrate de hacer clic en el botón 'Actualizar configuración de la barra de herramientas' para guardar tus configuraciones.

Así es como se ve la barra de herramientas en nuestro sitio web de prueba.

Correcciones de accesibilidad

WP Accessibility también proporciona varias correcciones de accesibilidad que podrían resolver problemas potenciales en tu sitio. Puedes revisar cada opción y ver si la necesitas.

Algunas configuraciones recomendadas estarán marcadas por defecto. Estas opciones evitan que los enlaces se abran en nuevas ventanas, muestran un error cuando envías una búsqueda vacía y eliminan el atributo HTML tabindex donde no es necesario para simplificar la navegación con teclado.

Si estás utilizando un tema amigable con la accesibilidad que ya ha habilitado algunas de estas funciones, verás un mensaje confirmando esto en la parte superior de la sección.

No olvides hacer clic en el botón 'Actualizar configuración miscelánea' para guardar tus cambios.

Características de accesibilidad

El plugin también proporciona algunas opciones para ayudar a que tu contenido sea más accesible.

El primer grupo de configuraciones hace que las imágenes sean más fáciles de manejar para quienes usan lectores de pantalla.

También hay opciones para mostrar resúmenes al principio de tus publicaciones y páginas. Esto permite que quienes usan lectores de pantalla escuchen un resumen del contenido antes de decidir escuchar el artículo completo.

Si cambias alguna de estas opciones, recuerda hacer clic en el botón ‘Actualizar funciones de accesibilidad’.

Experiencia de administración y pruebas

A continuación, encontrarás algunas configuraciones que te permitirán mejorar la accesibilidad de tu área de administración de WordPress y ayudar con las pruebas.

Esta sección es más técnica, así que asegúrate de consultar la documentación del plugin antes de marcar las casillas.

Asegúrate de hacer clic en el botón ‘Actualizar herramientas de accesibilidad’ para guardar tus cambios.

Eliminar atributos de título

Esta sección te permite eliminar el atributo de título de las nubes de etiquetas.

El atributo de título es considerado inútil por algunos expertos en accesibilidad. La mayoría de los lectores de pantalla suelen ignorar el atributo de título y en su lugar leen el texto del ancla.

Esta configuración está habilitada por defecto, pero si la cambias, asegúrate de hacer clic en el botón ‘Actualizar configuración de atributos de título’.

4. Verifica el contraste de color de tu sitio web

El contraste de color significa la diferencia entre el color del texto y el color de fondo. Es una parte muy importante de la accesibilidad del sitio web porque puede afectar la legibilidad del contenido de tu sitio para personas con problemas de visión y daltonismo.

Para cumplir con los estándares de accesibilidad web, el texto normal debe tener un alto contraste de al menos 4.5 a 1. Esto significa que el texto necesita ser 4.5 veces más brillante que el fondo.

Para texto más grande, el requisito es un poco menor, de 3 a 1. Esto significa que un contraste ligeramente menor es aceptable. La misma regla se aplica a gráficos y elementos de la interfaz de usuario, como los bordes de los campos de entrada de formularios.

El plugin WP Accessibility tiene un verificador de contraste de color incorporado que puedes usar.

En la configuración del plugin, simplemente desplázate hacia abajo hasta la sección Comprobador de contraste de color y elige un color de primer plano (el color que usarás para tu texto) y su color de fondo.

Luego, haz clic en ‘Comprobar contraste de color’.

El plugin te dirá si los colores pasan o no pasan la prueba de contraste.

Así es como se ve el resultado:

Alternativamente, puedes usar el Comprobador de contraste de WebAIM gratuito. Al igual que con la herramienta anterior, solo necesitarás seleccionar un color de primer plano y un color de fondo.

Esta herramienta no solo prueba el contraste de tu color, sino que también te muestra cómo se verán los colores como texto normal y grande, así como objetos gráficos y componentes de la interfaz de usuario.

Para más detalles, te puede interesar ver nuestra guía sobre cómo elegir el esquema de color perfecto para tu sitio web de WordPress.

5. Agrega texto alternativo a las imágenes

Además de ser útil para los motores de búsqueda, el texto alternativo ayuda a los lectores de pantalla a describir las imágenes a personas con discapacidades visuales.

Anteriormente, mencionamos que WordPress tiene una función incorporada para agregar texto alternativo. El proceso es bastante fácil y puedes leer todo sobre cómo configurarlo en las siguientes guías:

• Guía para principiantes de SEO de imágenes – Optimiza imágenes para motores de búsqueda
• Texto alternativo de imagen vs. Título de imagen en WordPress – ¿Cuál es la diferencia?

6. Agrega etiquetas a todos los campos del formulario

Si tienes formularios en tu sitio web, querrás asegurarte de usar las etiquetas apropiadas para cada elemento del formulario. Esto incluye campos de formulario, botones, menús, etc.

Las WCAG recomiendan agregar etiquetas a todos los elementos de formulario para facilitar que las herramientas de asistencia identifiquen y transmitan información sobre cada uno a los usuarios.

Además, agregar etiquetas claras y descriptivas es una buena práctica de diseño web. Al ayudar a los usuarios a comprender para qué sirve cada campo del formulario, es menos probable que ocurran errores y más personas podrán enviar sus formularios.

Si no estás seguro de cómo crear formularios geniales, te recomendamos que consultes WPForms. Es el mejor constructor de formularios de WordPress que facilita enormemente la personalización de formularios según tus necesidades exactas, incluida la mejora de la accesibilidad.

Puedes leer más sobre WPForms en nuestra reseña de WPForms. También, consulta estas guías sobre cómo crear formularios en WordPress:

• Cómo crear un formulario de contacto en WordPress (paso a paso)
• Cómo crear un formulario de reserva en WordPress
• Cómo crear un formulario de registro de usuario personalizado en WordPress

7. Usa etiquetas de encabezado adecuadas en tu contenido

Las etiquetas de encabezado son etiquetas HTML que pueden marcar los títulos o subtítulos de una página web. De esta manera, tu contenido está mucho más organizado y es más fácil de seguir.

Estas etiquetas también ayudan a herramientas como los lectores de pantalla a generar un esquema navegable para usuarios con discapacidades visuales. Esto les permitirá saltar entre secciones y comprender la estructura general de tu contenido.

Si no estás seguro de cómo aprovechar las etiquetas de encabezado, puedes leer nuestra guía sobre cómo usar correctamente las etiquetas de encabezado en WordPress.

8. Usa texto de anclaje descriptivo

El texto ancla o de enlace son básicamente las palabras o frases clickeables en un enlace. Generalmente, puedes saber qué texto está enlazado porque tendrá un color diferente.

A menudo, los blogueros usarán el texto de enlace 'haz clic aquí' o 'leer más' para dirigir a los visitantes a una página.

Esta no es una buena práctica para la accesibilidad porque no da ninguna información sobre a dónde va el enlace. Esto dificulta que las personas que usan tecnologías de asistencia comprendan el propósito del enlace.

Es por eso que es mejor usar texto ancla descriptivo en su lugar. Esto significa usar palabras que describan de qué trata el contenido cuando haces clic en el enlace.

Por ejemplo, digamos que quieres agregar un enlace a un artículo sobre el mejor hosting de WordPress en esta oración: 'Sigue esta guía para aprender sobre los mejores servicios de hosting de WordPress del mercado.'

En lugar de agregar el enlace a 'Sigue esta guía' o a cualquier otra parte de esa oración, deberías insertarlo en 'mejores servicios de hosting de WordPress'. De esta manera, el usuario obtiene una descripción general de lo que encontrará en el contenido enlazado.

Para más información sobre enlaces y texto ancla, consulta nuestra guía para principiantes sobre cómo agregar un enlace en WordPress.

9. Agrega subtítulos o transcripciones a contenido de video y audio

Una de las principales dificultades para los usuarios con discapacidades auditivas es la incapacidad de comprender el contenido hablado en videos y audio. Es por eso que muchos creadores de contenido de video y podcasters agregan subtítulos o transcripciones.

En WPBeginner, te desaconsejamos enfáticamente que subas videos a tu propio sitio web porque pueden ralentizar tu sitio. En su lugar, lo mejor es usar servicios como YouTube o Vimeo, ambos con herramientas integradas para añadir subtítulos.

En cuanto al contenido de audio, podrías considerar usar un servicio de transcripción para convertir el habla a texto fácilmente. De esta manera, no necesitarás crear manualmente una versión escrita de tu contenido de audio.

Echa un vistazo a nuestra lista de los mejores servicios de transcripción para más información.

10. Realiza pruebas de usabilidad y accesibilidad

Si has implementado todos los consejos de esta guía, el paso final es realizar pruebas de usabilidad y accesibilidad en tu sitio web de WordPress.

Estas pruebas pueden ayudarte a identificar cualquier problema restante y a hacer que tu sitio web sea fácil de usar y accesible para todos.

WebAIM tiene una Herramienta de Evaluación de Accesibilidad Web (WAVE) que puedes usar gratis.

Simplemente escribe el nombre de dominio de tu sitio web, y la herramienta identificará cualquier problema relacionado con la accesibilidad por ti.

También puedes usar un escáner de accesibilidad. Te recomendamos echar un vistazo a Accessibility Checker de Equalize Digital. También viene con una versión de plugin gratuita para escanear publicaciones y páginas ilimitadas en tu sitio web.

Después de instalar el plugin, puedes simplemente ir al editor de bloques de tu página o publicación. Si te desplazas hacia abajo hasta la sección de meta cuadros, encontrarás un Verificador de Accesibilidad que identifica tus problemas de accesibilidad.

Otra opción es realizar una auditoría UX, que básicamente significa revisar tu sitio web para ver si tiene una buena experiencia de usuario. Simplemente dirígete a nuestra guía de auditoría UX para más información.

Por último, pero no menos importante, te animamos a pedir la opinión de tus usuarios. Si bien las pruebas pueden darte resultados, obtener comentarios de los visitantes reales que utilizan las funciones de accesibilidad de tu sitio puede proporcionar información mucho más precisa.

UserFeedback es el mejor plugin para esta tarea. Te permite crear encuestas para recopilar las opiniones y pensamientos de tus usuarios. También hay plantillas para comentarios sobre el diseño del sitio web, por lo que no tendrás que crear la encuesta desde cero.

Para más información, consulta nuestra guía sobre cómo obtener comentarios sobre el diseño del sitio web en WordPress.

Guías Expertas sobre Accesibilidad en WordPress

Ahora que sabes cómo mejorar la accesibilidad en tu sitio, quizás te interese ver otras guías relacionadas con problemas de accesibilidad en WordPress:

• Cómo agregar widgets de WordPress en modo de accesibilidad
• Cómo elegir un esquema de color perfecto para tu sitio de WordPress
• Cómo agregar un redimensionador de fuentes en WordPress para accesibilidad
• Cómo agregar fácilmente el atributo de título a las imágenes en WordPress
• Cómo resaltar texto en WordPress (Guía para principiantes)
• Texto alternativo de imagen vs. Título de imagen en WordPress – ¿Cuál es la diferencia?

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.