Cómo mejorar la accesibilidad de su sitio WordPress

¿Quiere mejorar la accesibilidad de su sitio WordPress?

Al crear un sitio web, a menudo se descuida la accesibilidad, lo que puede crear una experiencia de usuario (UX) deficiente. Lo ideal es que tu sitio WordPress sea fácil de usar e incluya a todas las personas, independientemente de sus necesidades.

En este artículo, le mostraremos cómo mejorar la accesibilidad de su sitio web en WordPress.

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

En diseño web, la accesibilidad se refiere a las técnicas utilizadas para facilitar el uso de un sitio web a personas con discapacidad. Algunos visitantes utilizan tecnologías de apoyo para navegar por la web, como lectores de pantalla para personas con problemas visuales y navegación por teclado para quienes no pueden utilizar el ratón.

Los expertos recomiendan algunas buenas prácticas para hacer más accesibles los sitios web. Ayudan a que los sitios sean más inclusivos y fáciles de usar para todos, independientemente de su capacidad.

Al dar prioridad a la accesibilidad, más personas podrán navegar por su sitio web de WordPress y explorar su contenido. Si gestionas una tienda online, también aumentarás las 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 fáciles de usar. Además de hacer que su sitio web sea más adaptable para dispositivos móviles, también puede dar prioridad a la inclusión en el diseño de su web para mejorar las clasificaciones.

Además, si usted es propietario de un sitio web de negocios y la parte frontal de su sitio es inaccesible, podría enfrentarse a consecuencias legales.

La Ley de Estadounidenses con Discapacidades (ADA ) establece que los consumidores pueden presentar una queja si un sitio no cumple las directrices de accesibilidad. Es más, tu reputación podría quedar arruinada, lo que podría acarrear pérdidas económicas.

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

WordPress dispone de varias funciones integradas para ayudar a los usuarios a hacer accesibles sus sitios web. Por ejemplo, por defecto, puede añadir texto alternativo (alt text) y atributos de título a las imágenes para que los lectores de pantalla puedan leerlas en voz alta para los usuarios con deficiencias visuales.

WordPress también ha hecho obligatorio que todo el código nuevo y actualizado de WordPress siga sus normas de codificación de accesibilidad. Con ello se pretende garantizar que los desarrolladores de WordPress cumplan las mejores prácticas de accesibilidad al crear temas y plugins.

Además, WordPress incluye características que facilitan a los usuarios con discapacidad la creación de sus propios sitios web, como el modo de accesibilidad para añadir widgets.

Para más información, le recomendamos que siga la etiqueta Accesibilidad de la página Make WordPress Core.

Teniendo todo esto en cuenta, WordPress no es totalmente accesible desde el primer momento. Como propietario de un sitio web, es importante que tomes medidas adicionales para que tu sitio cumpla las normas de accesibilidad.

Hemos dividido esta guía en unos cuantos consejos sencillos para mejorar la accesibilidad de su sitio web en WordPress. Puede utilizar estos enlaces rápidos para navegar a una sección específica:

1. Familiarícese con las Directrices de Accesibilidad al Contenido en la Web (WCAG)

Lo primero es lo primero: recomendamos leer las Directrices de Accesibilidad al Contenido en la Web (WCAG). Son las normas establecidas por la Iniciativa de Accesibilidad Web (WAI) del W3C para que los usuarios hagan más accesibles sus sitios web.

Para empezar, puede comprobar las actualizaciones de las WCAG 2.1 y WCAG 2.2. Si ambos documentos te parecen demasiado largos para leerlos, no dudes en marcar esta referencia rápida.

2. Utilice un tema de WordPress preparado para la accesibilidad

Los temas preparados para la accesibilidad cumplen las normas mínimas de accesibilidad establecidas por el equipo de reseña / valoración de temas de WordPress.

Utilizar un tema de WordPress accesible no significa que tu sitio web vaya a cumplir automáticamente todos los requisitos de accesibilidad, ya que aún tendrás que hacer algunos retoques por tu cuenta. Sin embargo, puede darte un empujón para hacer tu sitio web más accesible.

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

• Menús en los que sólo se puede navegar con el teclado.
• Buen contraste de colores que hace que el contenido sea legible para usuarios con deficiencias visuales.
• HTML semánticamente correcto, 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 comprobar si el tema contiene atributos ARIA. Estos atributos son como información extra que complementa el HTML de tu tema para facilitar aún más la navegación por un sitio web a las tecnologías de asistencia.

La forma más sencilla de buscar un tema preparado para la accesibilidad es ir a Apariencia ” Temas en tu escritorio de WordPress. A continuación, haz clic en “Añadir nuevo tema”.

Desde aquí, seleccione “Filtro de características” y elija “Preparado para accesibilidad”.

No dudes en añadir más filtros para encontrar el tema que mejor se adapte a tus necesidades.

Ahora, desplázate hacia abajo y haz clic en “Aplicar filtros”.

A continuación, verá en pantalla algunos temas preparados para la accesibilidad.

Para obtener más recomendaciones sobre temas, marque / compruebe nuestras selecciones de expertos de los mejores temas de WordPress.

3. Instale un plugin de accesibilidad de WordPress

Un plugin de accesibilidad para WordPress añade características útiles para que los visitantes con discapacidad puedan navegar 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:

• Añadir una barra de herramientas de accesibilidad
• Detectar si su tema está preparado para la accesibilidad
• Seguimiento del uso de las características de accesibilidad de su sitio web para que pueda evaluarlas.

En primer lugar, debe instalar y activar el plugin en WordPress.

Una vez activado, debe ir a Ajustes ” WP Accesibilidad para configurar el plugin.

Veamos cada sección de la página de ajustes.

Añadir enlaces omitidos

En la primera sección de los ajustes del plugin, puede utilizar enlaces omitidos en su sitio web, y este ajuste está activado por defecto. Un enlace omitido permite a los usuarios saltar directamente a la sección de contenido de una entrada o página.

Se trata de una característica muy útil para las personas que utilizan lectores de pantalla. Sin un enlace omitido, tendrán que escuchar todo lo que se muestra en su sitio web, incluidos los menús de navegación, antes de llegar a la parte del contenido.

Si tu tema ya utiliza enlaces omitidos, verás un aviso confirmándolo.

Barra de accesibilidad

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

Al activarlo, el plugin añadirá una barra de herramientas en su sitio web donde los usuarios pueden cambiar el tamaño de las fuentes o ver su sitio en modo de color de alto contraste.

Esto permite a los usuarios seleccionar las opciones que necesitan para facilitar la lectura de la página.

Para activar la barra de herramientas, sólo tiene que marcar las casillas de verificación “Tamaño de fuente” y “Contraste”.

También hay ajustes que permiten controlar el tamaño y la ubicación de la fuente de la barra de herramientas.

Si realiza cambios en estos ajustes, asegúrese de hacer clic en el botón “Actualizar ajustes de la barra de herramientas” para almacenar sus ajustes.

Este es el aspecto de la barra de herramientas en nuestro sitio web de prueba.

Correcciones de accesibilidad

WP Accesibilidad también proporciona varias correcciones de accesibilidad que podrían resolver posibles problemas en su sitio. Usted puede ir a través de cada opción y ver si lo necesita.

Algunos ajustes recomendados se marcarán / comprobarán por defecto. Estas opciones evitan que los enlaces se abran en ventanas nuevas, muestran un error cuando se envía una búsqueda vacía y eliminan el atributo HTML tabindex cuando no es necesario para simplificar la navegación con el teclado.

Si está utilizando un tema accesible que ya ha activado algunas de estas características, verá un mensaje confirmándolo en la parte superior de la sección.

No olvides hacer clic en el botón “Actualizar ajustes varios” para almacenar los cambios.

Características de accesibilidad

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

El primer grupo de ajustes facilita el manejo de las imágenes a quienes utilizan lectores de pantalla.

También hay opciones para mostrar resúmenes en la parte superior de tus entradas y páginas. Esto permite a las personas con lectores de pantalla escuchar un resumen del contenido antes de decidirse a escuchar el artículo completo.

Si cambia alguna de estas opciones, recuerde hacer clic en el botón “Actualizar características de accesibilidad”.

Pruebas y experiencia como administrador

A continuación, encontrará algunos ajustes que le permitirán mejorar la accesibilidad de su área de administrador de WordPress y le ayudarán 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úrese de hacer clic en el botón “Actualizar herramientas de accesibilidad” para guardar los cambios.

Quitar atributos del título

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

Algunos expertos en accesibilidad consideran que el atributo title es inútil. La mayoría de los lectores de pantalla suelen ignorar el atributo title y, en su lugar, leen el texto de anclaje.

Este ajuste está activado por defecto, pero si lo cambia, asegúrese de hacer clic en el botón “Actualizar ajustes de atributos del título”.

4. Marcar / comprobar el contraste de color de su sitio web

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

Para cumplir las normas de accesibilidad web, el texto normal debe tener un alto contraste de al menos 4,5 a 1. Esto significa que el texto debe ser 4,5 veces más brillante que el fondo.

Para textos más grandes, el requisito es algo menor, de 3 a 1. Esto significa que se acepta un contraste ligeramente inferior. La misma regla se aplica a los gráficos y a los elementos de la interfaz de usuario, como los bordes de los formularios.

El plugin WP Accessibility tiene incorporado un comprobador de contraste de color que puede utilizar.

En los ajustes del plugin, simplemente desplácese hasta la sección Comprobador de contraste de color y elija un color de primer plano (el color que utilizará para el texto) y su color de fondo.

A continuación, haga clic en “Comprobar contraste de color”.

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

Este es el resultado:

Como alternativa, puede utilizar la herramienta gratuita WebAIM Contrast Checker. Al igual que con la herramienta anterior, solo tendrá que seleccionar un color de primer plano y un color de fondo.

Esta herramienta no solo comprueba su contraste de color, sino que también le muestra el aspecto que pueden tener los colores en texto normal y grande, así como en objetos gráficos y componentes de la interfaz de usuario.

Para obtener más información, consulte nuestra guía sobre cómo elegir la combinación de colores perfecta para su sitio web en WordPress.

5. Añadir texto alternativo a las imágenes

Además de ser útil para los motores de búsqueda, el texto alternativo sirve para que los lectores de pantalla describan las imágenes a las personas con deficiencias visuales.

Anteriormente, mencionamos que WordPress tiene una característica incorporada para añadir texto alternativo. El proceso es bastante sencillo, y puedes leer todo acerca de cómo establecerlo en las siguientes guías:

• Guía para principiantes sobre SEO de imágenes – Optimizar imágenes para motores de búsqueda
• Texto Alt de Imagen vs Título de Imagen en WordPress – ¿Cuál es la Diferencia?

6. Añadir etiquetas a todos los campos del formulario

Si tiene formularios en su sitio web, asegúrese de utilizar las etiquetas adecuadas para cada elemento del formulario. Esto incluye campos de formulario, botones, menús, etc.

Las WCAG recomiendan añadir etiquetas a todos los elementos del formulario para facilitar a las herramientas de asistencia la identificación y transmisión de información sobre cada uno de ellos a los usuarios.

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

Si no estás seguro de cómo crear buenos formularios, te recomendamos marcar / comprobar WPForms. Es el mejor maquetador de formularios de WordPress que hace que sea muy fácil personalizar los formularios a sus necesidades exactas, incluyendo la mejora de la accesibilidad.

Puede leer más acerca de WPForms en nuestra reseña / valoración de WPForms. También, marque / comprobar 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. Utilice etiquetas de encabezado adecuadas en su contenido

Las etiquetas de encabezado son etiquetas HTML que pueden marcar los títulos o subtítulos de una página web. De este modo, su 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 deficiencias visuales. Esto les permitirá saltar entre secciones y comprender la estructura general de su contenido.

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

8. Utilice texto de anclaje descriptivo

El texto ancla o de enlace son básicamente las palabras o frases sobre las que se puede hacer clic en un enlace. Normalmente se puede saber qué texto está enlazado porque aparecerá en un color diferente.

A menudo, los blogueros utilizan el texto del enlace “haga clic aquí” o “lea más” para dirigir a los visitantes a una página.

Esto no es una buena práctica para la accesibilidad porque no da ninguna información acerca de dónde va el enlace. Esto dificulta que las personas que utilizan tecnologías de apoyo entiendan el propósito del enlazar.

Por eso es mejor utilizar un texto de anclaje descriptivo. Esto significa utilizar palabras que describan de qué trata el contenido al hacer clic en el enlace.

Por ejemplo, supongamos que desea añadir un enlace a un artículo acerca del mejor alojamiento para WordPress en esta frase: “Siga esta guía para conocer los mejores servicios de alojamiento para WordPress del mercado”.

En lugar de añadir el enlace a “Siga esta guía” o en cualquier otro lugar de esa frase, debería insertarlo en “mejores servicios de alojamiento de WordPress“. De esta forma, el usuario obtiene una visión general de lo que encontrará en el contenido enlazado

Para obtener más información acerca de los enlaces y el texto de anclaje, consulte nuestra guía para principiantes sobre cómo enlazar en WordPress.

9. Añadir leyendas o transcripciones a contenidos de vídeo y audio

Uno de los principales problemas de los usuarios con discapacidad auditiva es la imposibilidad de entender el contenido hablado en vídeos y audio. Por eso muchos creadores de contenidos de vídeo y podcasters añaden leyendas o transcripciones.

En WPBeginner, te desaconsejamos encarecidamente que subas vídeos a tu propio sitio web porque pueden ralentizar tu sitio. En su lugar, es mejor utilizar servicios como YouTube o Vimeo, ambos con herramientas integradas para añadir leyendas.

En cuanto al contenido de audio, puede considerar la posibilidad de utilizar un servicio de transcripción para convertir la voz en texto fácilmente. De este modo, no tendrás que crear manualmente una versión escrita de tu contenido de audio.

Para más información, marque / compruebe nuestra lista de los mejores servicios de transcripción.

10. Realizar pruebas de usabilidad y accesibilidad

Si ha puesto en práctica todos los consejos de esta guía, el último paso es realizar pruebas de usabilidad y accesibilidad en su sitio web de WordPress.

Estas pruebas pueden ayudarle a identificar cualquier problema / incidencia pendiente y a hacer que su sitio web sea fácil de usar y accesible para todos.

WebAIM dispone de una herramienta de evaluación de la accesibilidad web (WAVE ) que puede utilizar gratuitamente.

Sólo tiene que introducir el nombre de dominio de su sitio web y la herramienta identificará por usted cualquier problema / conflicto / incidencia relacionados con la accesibilidad.

También puedes utilizar un escáner de accesibilidad. Te recomendamos marcar / comprobar Accessibility Checker de Equalize Digital. También viene con una versión gratuita de plugin para explorar un número ilimitado de entradas y páginas de tu sitio web.

Después de instalar el plugin, sólo tienes que ir al editor de bloques de tu página o entrada. Si se desplaza hasta la sección de la caja meta, encontrará un Comprobador de accesibilidad que identifica sus problemas / conflictos / incidencias de accesibilidad.

Otra opción es realizar una auditoría de UX, que básicamente consiste en marcar / comprobar si su sitio web tiene una buena experiencia de usuario. Para más información, visita nuestra guía de auditoría de UX.

Por último, pero no por ello menos importante, te animamos a que solicites la respuesta / comentario / opinión de los usuarios. Aunque las pruebas pueden darle resultados, obtener la respuesta / comentario / opinión de los visitantes reales que utilizan las características de accesibilidad de su sitio puede proporcionarle información mucho más precisa.

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

Para obtener más información, consulte nuestra guía sobre cómo obtener comentarios / opiniones sobre el diseño de sitios web en WordPress.

Guías de expertos sobre accesibilidad en WordPress

Ahora que ya sabe cómo mejorar la accesibilidad de su sitio, puede que le interese consultar otras guías relacionadas con problemas de accesibilidad en WordPress:

• Cómo añadir widgets de WordPress en modo de accesibilidad
• Cómo elegir la combinación de colores perfecta para su sitio de WordPress
• Cómo añadir un redimensionador de fuentes en WordPress para mejorar la accesibilidad
• Cómo añadir fácilmente atributos de título a las imágenes en WordPress
• Cómo resaltar texto en WordPress (Guía para principiantes)
• Texto Alt de Imagen vs Título de Imagen en WordPress – ¿Cuál es la Diferencia?

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.