Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo mejorar la accesibilidad de su sitio WordPress

Imagínese visitar un sitio web solo para descubrir que no puede leer el texto, navegar por los menús o entender el contenido. Por desgracia, esta es una realidad cotidiana para muchas personas desactivadas.

Al crear un sitio web, a menudo se descuida la accesibilidad, lo que crea un obstáculo entre el contenido y muchos de los visitantes. Según nuestra experiencia, esto puede resultar poco acogedor y excluyente.

Garantizar que su sitio web sea accesible no es solo una cuestión de cumplimiento de la ley, sino que también garantiza una experiencia de usuario (UX) excepcional para todos los visitantes, independientemente de sus necesidades o capacidades.

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

How to Improve Accessibility on Your WordPress Site

¿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”.

Adding a new theme in WordPress

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.

Selecting the Accessibility Ready filter in WordPress themes page

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

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

Applying theme filters in WordPress

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.

WP Accessibility Settings

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.

WP Accessibility Add Skiplinks

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.

WP Accessibility Toolbar

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.

WP Accessibility Toolbar

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.

WP Accessibility Toolbar Preview

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.

WP Accessibility Fixes

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.

WP Accessibility Features

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.

WP Accessibility Testing & Admin Experience

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.

WP Accessibility Remove Title Attributes

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”.

Checking color contrast using WP Accessibility

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

Este es el resultado:

WP Accessibility color contrast test results

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.

Free WebAIM Color Contrast Checker

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.

Adding a title to an image in WordPress

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:

Consejo de experto: Si desea establecer automáticamente un formato de texto alternativo coherente para todas sus imágenes, puede utilizar la herramienta SEO para imágenes de All in One SEO.

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.

Adding checkout date and time fields to a form

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.

WPForms

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:

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.

WebAIM's Web Accessibility Evaluation Tool (WAVE)

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.

Example of what the Accessibility Checker plugin does

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.

UserFeedback plugin

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:

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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

13 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dorin Mihaila

    Good article, accessebility is definitely something you want to have on the site.

  3. Clifford Blaylock

    I am getting a bit disappointed and confused that these days it is always suggested that a Word press plugin is needed to do most things in Word Press. At this present time everyone is talking about how important your website speed is, but the more plugins you have installed the slower your website speed is going to be. I would be interested to know some more facts on this subject.
    Regards Cliff

  4. Larry Auerbach

    I could use some help on the scheduling feature, to allow posts to publish themselves on a certain day and time. I do not seem to be doing it correctly, as this isn’t happening on the date and time I have preset in the settings box.

  5. Anselm Urban

    The Genesis Framework is said to have very good accessibility. Should I use the plugin anyway?

    • WPBeginner Support

      You can give it a try and see if the plugin makes any recommendations. You still need to choose a combination between functionality, design, accessibility, and usability. It is up to you to decide which recommended accessibility settings you want to implement on your website.

      Administrador

  6. Dick Foster

    What about using “em” instead of “px” for setting appropriate text height? Is adjusting that parameter included in this plugin?

    Many sites (including this one) have what some people would consider difficult to read text because it is too small.

    Of course, Chrome and other browsers allow you to magnify (zoom) on pages, but that requires an unnecessary step if sites use “em” to set text height.

  7. Tuhinshubhra

    Awesome explained….

  8. Joe Dolson

    Thanks for sharing my plug-in! If anybody wants to learn the nitty-gritty details on every feature in the WP Accessibility plug-in, they should read the feature documentation after getting your overview! That’ll help you decide which features you need for your site.

    • WPBeginner Support

      Thanks Joe Dolson for sharing writing this very helpful plugin. We have already linked to the plugin’s documentation in the article.

      Administrador

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.