Accesibilidad WordPress: Cómo crear un sitio web accesible (+ plugins para ello)

Maddy Osman Última actualización: 19/10/2020
12 min.
Accesibilidad en WordPress
Última actualización: 19/10/2020

La accesibilidad en WordPress es un componente importante durante la creación de sitios web que no se discute lo suficiente. Pero, ¿hasta qué punto es accesible el popular CMS en realidad? ¿Por qué es tan importante la accesibilidad? ¿Y cómo conseguir que tu sitio web sea también accesible para todos/as?

Acceso para todos/as: datos sobre la accesibilidad

WordPress consigue que más del 35% de los sitios web funcionen. Los sitios de comercio electrónico, las grandes publicaciones en línea, los canales de noticias, los blogs y los sitios web empresariales utilizan WordPress porque es fácil de usar.

Y precisamente debido al hecho de que WordPress es tan popular, tiene un gran impacto en la accesibilidad web. Sin embargo, la accesibilidad no siempre es el objetivo principal a la hora de desarrollar y rediseñar un sitio web. En cambio, muchos/as usuarios/as de WP se preocupan por elegir el theme adecuado, mejorar su posicionamiento SEO y asegurarse de que su sitio web se carga rápidamente. No hay nada malo en ello, pero debería ser igual de importante que la accesibilidad de tu sitio WordPress para todos/as. 

Según las estadísticas de Interactive Accessibility, 56 millones de estadounidenses viven con una discapacidad. Además, el Pew Research Center, el centro de investigación de Pew, afirma que el 54% de los adultos estadounidenses con discapacidades utilizan internet con regularidad. Y eso es solo en Estados Unidos. A nivel mundial, estas cifras van en aumento.

Si se ignora la cuestión de la accesibilidad, ya se está excluyendo al 20% de la población mundial de poder utilizar tu sitio web en la actualidad. En resumen, descuidar la accesibilidad no es bueno para tu negocio, pero lo más importante: descuidar este punto es terrible si se pretende crear un mundo más justo y equitativo. 

Así que si alguna vez te has preguntado cómo crear un sitio web accesible utilizando WordPress, esta guía es tu mejor aliado. Responderemos a algunas preguntas clave, como:

  • ¿Qué es la accesibilidad web?
  • ¿Es WordPress accesible "fuera de la caja"?
  • ¿Qué herramientas y plugins te ayudan a crear un sitio WordPress accesible? 

¿Qué es la accesibilidad web?

La accesibilidad web se refiere a las herramientas que permiten a las personas con discapacidad utilizar y acceder a la web. Esto es especialmente importante en el caso de las discapacidades que pueden afectar al modo en que las personas acceden a la web y la utilizan, por ejemplo:

  • Discapacidades visuales
  • Deficiencias acústicas
  • Deterioro de la lengua
  • Discapacidades cognitivas 
  • Discapacidades neurológicas
  • Incapacidades temporales (como un brazo roto)

Esta lista incluye discapacidades relacionadas con la edad, e incluso discapacidades derivadas de una conexión lenta a internet. Una de las principales razones por las que la accesibilidad es tan importante es el papel cada vez más importante que desempeña internet en nuestra vida cotidiana: desde el acceso a la información y las noticias de última hora hasta la compra de alimentos y el contacto con nuestros seres queridos.

Más razones por las que la accesibilidad es importante en internet: 

Dada la importancia de internet en el mundo moderno, la red debe ser accesible para todos/as, independientemente de su estatus o capacidad.

¿Es WordPress accesible "fuera de la caja"? 

WordPress no siempre ha sido accesible. Hace apenas unos años, los/as usuarios/as que dependían de las tecnologías de asistencia en la web tenían importantes problemas para navegar por el panel de control del administrador.

Accesibilidad WordPress: Cómo crear un sitio web accesible (+ plugins para ello)

Muchas cosas han cambiado desde entonces. En primer lugar, un pequeño grupo de voluntarios/as, el llamado Make WordPress Accessible Team, en español: «El equipo para hacer WordPress accesible», mejoró considerablemente la accesibilidad de WordPress.  

Como resultado de su trabajo, el área de administración se ha vuelto mucho más accesible junto con la biblioteca de medios y el personalizador de temas. Además, se han añadido numerosos atajos de teclado a Core de WordPress para agilizar la edición y el formato de las entradas y páginas. 

Las normas de codificación para la accesibilidad de WordPress se añadieron al manual del Core de WordPress en marzo de 2016. Desde entonces, los themes y plugins tienen que pasar un estricto control de accesibilidad para poder ser clasificados como accesibles.

¿Qué es el Core Contributor Handbook o «Manual del Colaborador Principal»?

El manual define las normas de codificación que deben cumplir los desarrolladores WP cuando añaden sus contribuciones al Core de WordPress y envían themes y plugins al repositorio oficial.

Se han realizado importantes cambios y mejoras. No obstante, WordPress todavía tiene que trabajar en el ámbito de la accesibilidad. Aunque WordPress se esfuerza por cumplir con las Directrices de Accesibilidad para Herramientas de Autor (ATAG) 2.0, hay otros problemas que se interponen en el camino de la accesibilidad al 100%: 

  • Desarrolladores/as de themes y plugins de terceros no siempre se adhieren a las Directrices de Accesibilidad. Por ello, la mayoría de los problemas de accesibilidad en WordPress se deben a que existen themes y plugins no accesibles.
  • El nuevo editor Gutenberg tenía 90 problemas de accesibilidad en el momento de su lanzamiento. (En el momento de escribir este artículo, solo quedan 22 cuestiones sin resolver).
Accesibilidad WordPress: Cómo crear un sitio web accesible (+ plugins para ello)

Consejos para la creación de un sitio WordPress accesible

Cuando se crea un sitio web accesible, hay ciertos principios que se recogen en las Directrices de Accesibilidad sobre el Contenido en la Web. Definitivamente, deberías utilizarlos para asegurarte de que todo el mundo pueda utilizar tu sitio web. 

Lista de comprobación para la accesibilidad de sitios web

  • Perceptible: todos/as los/as usuarios/as deben ser capaces de percibir los componentes de la información y la interfaz de usuario.
  • Utilizable: independientemente del dispositivo que utilicen tus usuarios/as para acceder a tu web, los componentes de la interfaz de usuario y la navegación deben ser utilizables.
  • Comprensible: todos/as los/as usuarios/as deben ser capaces de entender tanto la información como la interfaz de usuario.
  • Robusto: tanto los/as usuarios/as como los distintos agentes de usuario (incluidas las tecnologías de asistencia) deben ser capaces de leer y comprender el contenido del sitio web. 

Sobre la base de estos cuatro principios clave, he aquí algunas de las pautas que debe seguir para crear un sitio web accesible con WordPress: 

Directrices para garantizar que tu sitio web sea perceptible

  • Los enlaces y los botones no deben distinguirse del resto del contenido solo por el color.
  • Proporcionar asistencia Braille y ofrecer alternativas de texto para contenidos visuales y auditivos, como imágenes y vídeos.
  • Ajuste el ancho del texto y el ancho de la línea a tamaños que maximicen la legibilidad.
  • Asegúrate de que hay suficiente contraste entre el texto y el fondo. En otras palabras, no utilices texto rojo brillante sobre un fondo negro.
  • Los contenidos de audio y vídeo deben incluir transcripciones, subtítulos o lenguaje de signos.
  • Deben evitarse los GIF animados, las animaciones intermitentes y otros contenidos que puedan provocar malestar y reacciones físicas.

Directrices para garantizar la operatividad de tu sitio web

  • Abstente de utilizar CAPTCHA u ofrece múltiples formas de resolver esto, ya que pueden plantear problemas a muchas personas.
  • Los enlaces no deben abrir el contenido en una nueva ventana sin avisar a tus usuarios/as o sin interacción previa.
  • Asegúrate de que tus usuarios/as puedan acceder a los botones y elementos de menú (así como a los menús desplegables) mediante el teclado y el ratón. 
  • Los elementos multimedia como vídeos, audios, carruseles o deslizadores no deben configurarse para que se reproduzcan automáticamente o cambien sin la interacción del usuario.

Directrices para que tu sitio web sea comprensible

  • A la hora de diseñar, piensa en diferentes ventanas de visualización y cambia la posición y el aspecto de los elementos principales en consecuencia.
  • Utiliza títulos para definir las diferentes subsecciones de una página.
  • Evita utilizar jerga, términos difíciles y abreviaturas. En cambio, asegúrate de que tu contenido esté escrito de forma clara y concisa.
  • Los enlaces deben ser descriptivos y tener sentido sin contexto. Por ejemplo, es mejor tener un botón o un enlace con el texto «Descubre más sobre nuestros servicios» que simplemente «Descubre más».

Directrices para garantizar la solidez de tu sitio web

  • Añade enlaces de salto en la parte superior de cada sitio.
  • Asegúrate de que tus campos del formulario tengan las etiquetas adecuadas. Los formularios también deben incluir mensajes de advertencia y confirmación que sean fáciles de ver para los daltónicos.
  • Utiliza eltabindex para
    insertar
    un elemento que normalmente no recibe foco, como por ejemplo
    o , en el orden de navegación cuando se utiliza para la interacción
    .
  • Los medios descargables, como documentos PDF o contenidos de audio o vídeo, deben tener una descripción que indique que la descarga está a punto de comenzar.
  • Los elementos interactivos no estándar, como acordeones o pestañas, deben tener un significado de acuerdo con los roles de WAI-ARIA.

Las mejores plugins y herramientas de accesibilidad en WordPress

Si sigues las directrices anteriores, tu sitio web será accesible. Sin embargo, no siempre es tan fácil seguir todas estas normas y directrices.

Afortunadamente, hay una serie de plugins y herramientas para WordPress que te ayudarán a crear sitios web accesibles más rápidamente, sin olvidar pasos importantes. 

Accesibilidad de WordPress

WP-Accessibility

WP Accessibility es uno de los mejores plugins de accesibilidad WordPresss de entre los plugins del directorio oficial de WordPress. Tiene una calificación de 5 estrellas y más de 30 000 instalaciones activas. El plugin aborda y soluciona problemas comunes de accesibilidad en temas WordPress. 

Características principales de WP Accessibility:

  • Añadir enlaces de salto con destinos personalizados
  • Añadir un contorno al estado de enfoque del teclado
  • Eliminar el índice de pestañas de los elementos enfocables
  • Añadir descripciones largas a las imágenes
  • Forzar atributos Alt para las imágenes en el editor clásico

WP Accessibility también corrige problemas de accesibilidad en el Core de WordPress, como la eliminación de atributos de título innecesarios en las listas de páginas, listas de categorías y menús de archivos.

El mejor plugin de accesibilidad WordPress para: empresas con sitios web existentes que quieren mejorar su accesibilidad.

Precio: puedes descargar WP Accessibility gratis desde el directorio oficial. 

Barra de herramientas de accesibilidad WordPress

Barra de herramientas WPAccessible

Labarra de herramientas AccessibleWP, antes conocida como Accessible Poetry, tiene una calificación de 4,5 estrellas y más de 4 000 instalaciones activas. Este plugin WordPress facilita la habilitación de ciertas funciones y hace más accesible tu sitio web. 

Características principales de la barra de herramientas AccessibleWP:

  • Habilitar la navegación por teclado para que los/as usuarios/as puedan navegar por tu web con su teclado,
  • Los/as usuarios/as pueden desactivar las animaciones CSS3
  • Los/as usuarios/as pueden cambiar los colores del sitio web por otros con mejor contraste
  • Los/as usuarios/as pueden cambiar los colores del sitio web a colores en escala de grises
  • Los/as usuarios/as pueden aumentar o disminuir el tamaño de la letra en tu web.

El mejor plugin de accesibilidad WordPress para: empresas que quieran tener un sitio web más accesible, pero manteniendo un esquema de colores de marca y una estética general. 

Precio: puedes descargar la barra de herramientas de AccessibleWP gratis desde el directorio oficial. 

Accesibilidad con un solo clic

Accesibilidad con un solo clic

El popular plugin WordPress para accesibilidad, One Click Accessibility, fue desarrollado originalmente para Pojo Framework y ahora es compatible con todos los themes WordPress. Este plugin tiene una calificación de 4,5 estrellas y más de 30 000 instalaciones activas. 

Características principales de la accesibilidad en un clic: 

  • Los/as usuarios/as pueden activar o controlar el tamaño de la letra, el contraste, el subrayado de los enlaces y las fuentes legibles con una barra de herramientas de accesibilidad
  • Activar los enlaces de omisión
  • Añadir el enfoque del contorno para los elementos enfocables
  • Eliminar los atributos de destino de los enlaces y añadir funciones de referencia

El mejor plugin de accesibilidad WordPress para: sitios web creadas originalmente en el marco de Pojo-Frameworks.

Precio: One Click Accessibility puede descargarse gratis desde el directorio oficial. 

WordPress Accessibility Helper

WordPress -Accesibilidad-Ayudante

WordPress Accessibility Helper tiene una calificación de 5 estrellas y más de 10 000 instalaciones activas. El plugin ofrece una versión gratuita con un amplio conjunto de funciones. La versión premium ofrece aún más funciones, como la posibilidad de controlar las ventanas modales y emergentes, añadir acordeones y personalizar los logotipos.

Características principales de WordPress Accessibility Helper

  • Añadir enlaces de omisión
  • Ajuste el tamaño de la letra según tus preferencias
  • Compruebe si las páginas y los mensajes contienen errores de accesibilidad
  • Establecer colores personalizados para un contraste mejor o más oscuro
  • Subrayar o resaltar todos los enlaces

El mejor plugin de accesibilidad WordPress para: empresas que necesiten un plugin robusto para hacer de la accesibilidad una característica clave de su sitio web y de su negocio. 

Precio: WordPress Accessibility Helper puede descargarse gratis. Puedes adquirir la versión Pro por $80, que te permitirá instalar el plugin en un sitio web y obtener tres meses de asistencia técnica. 

WP ADA Compliance Check Basic

WP-ADA-Compliance-Check-Basic

WP ADA Compliance Check Basic comprueba si tu sitio web tiene problemas de accesibilidad y te proporcionará un informe detallado al respecto. La evaluación se basa en la Sección 508 de las Normas de Accesibilidad a la Web y en el Nivel A/AA de las WCAG 2.1. 

Características principales de WP ADA Compliance Check Basic

  • Evaluar tu sitio web para detectar problemas de accesibilidad web
  • Ejecutar informes de accesibilidad
  • Obtener instrucciones fáciles de seguir sobre cómo solucionar los problemas de accesibilidad
  • Corrección automática de los problemas de accesibilidad (versión premium)
  • Problemas para identificar los archivos en themes (versión premium)

El mejor plugin WordPress de accesibilidad para: empresas que quieran centrarse principalmente en las directrices legales de accesibilidad web, o empresas interesadas en la función de autocorrección que ahorra tiempo con la versión premium.

Precio: WP ADA Compliance Check Basic se puede descargar gratis y está limitado a 25 entradas o páginas. La versión premium se puede adquirir a partir de $165 para un sitio web y ofrece un año de soporte y actualizaciones. 

Access Monitor

Monitor de acceso

El plugin Access Monitor tiene una calificación de 5 estrellas y 400 instalaciones. Este plugin no añade ninguna característica de accesibilidad al tu sitio web, pero permite comprobar el grado de accesibilidad actual de este. También realiza una comprobación automática de la accesibilidad, controlada por el servicio de accesibilidad web Tenon.io

Características principales de Access Monitor

  • Programar informes de accesibilidad semanales o mensuales
  • Probar un conjunto específico de páginas
  • Conocer los problemas de accesibilidad que pueden determinarse definitivamente por la máquina

El mejor plugin WordPress de accesibilidad para: empresas que deseen una forma sencilla y gratuita de identificar los problemas de accesibilidad de forma periódica. 

Precio: Access Monitor puede descargarse gratis desde el directorio oficial. 

Nota sobre plugins WordPress y accesibilidad

Es importante tener en cuenta que los plugins, al igual que los themes WordPress, pueden ser presentados por cualquier persona y serán sometidos a un control de accesibilidad opcional durante el proceso de revisión. En consecuencia, muchos de los plugins WordPress no cumplen con las directrices de accesibilidad digital, y su uso puede hacer que el tu web deje de ser accesible. 

Ejemplos comunes de este tipo de plugins son plugins deslizadores o de carrusel, que se configuran para que se reproduzcan automáticamente o se pausen con la interacción del teclado. Otro ejemplo es un plugin de formularios que no tenga campos correctamente etiquetados. Teniendo esto en cuenta, deberías volver a probar la accesibilidad de tu sitio cada vez que instales un plugin nuevo. 

Themes WordPress y accesibilidad

Desgraciadamente, si accedes al directorio oficial de WordPress y filtras la búsqueda por themes accesibles, encontrarás que solo hay unos 108 themes

WordPress -Themes

Como se ha mencionado anteriormente, gracias a los esfuerzos del equipo de Make WordPress Accessible, los/as proveedores/as de themes pueden presentar su theme para una revisión de accesibilidad opcional durante el proceso de revisión. 

Para recibir la etiqueta "Accessibility Ready", un theme debe cumplir una serie de directrices de accesibilidad digital que figuran en el manual de revisión de los themes y en el Codex de WordPress oficial. 

Desarrollo de sitios accesibles en WordPress

Seamos realistas, la mayoría de usuarios/as de WP optarán por un theme premium de mercados de terceros o un tema completamente personalizado. 

Si eres un/a desarrollador/a encargado/a de crear un sitio web accesible WordPress, hay algunos temas que puedes utilizar como punto de partida.

Underscores

Underscores

Underscores fue desarrollado por Automattic y es un punto de partida para la mayoría de themes de WordPress .com disponibles. El theme contiene varios elementos accesibles. 

Genesis by StudioPress

Génesis

Genesis by StudioPress es un popular framework premium que puede ser utilizado para desarrollar tu propio theme Child Genesis accesible. Como alternativa, puedes utilizar uno de los themes Child existentes con características accesibles.  

GeneratePress

GeneratePress

GeneratePress es otro theme popular accesible que podrás utilizar como punto de partida para tu diseño.

WCAG Theme

WCAG-Theme

WCAG Theme fue diseñado específicamente pensando en la accesibilidad y cumple con la Sección 508 y WCAG 2.0 AA. Además, es totalmente compatible con el teclado. 

Astra

Astra

Astra es un theme popular con versiones gratuitas y premium que cuenta con una etiqueta accesible, comptabile con plugins tipo page builder más populares y tiempos de carga rápidos.

Astra te proporciona una base accesible para tu sitio WordPress y acelera el tiempo y el proceso de desarrollo. 

Más recursos sobre accesibilidad en WordPress

En lo que respecta a WordPress y la accesibilidad, hay mucha información en internet. Si quieres saber más sobre la accesibilidad, aquí tienes algunos buenos sitios para empezar a investigar:

  • Making Accessible WordPress Themes: una presentación de Joseph Karr O'Connor de WordCamp 2013 en Montreal. La presentación trata el tema de la accesibilidad en general y su aplicación en WordPress, incluyendo la creación de plugins accesibles, themes y widgets, y cómo crear contenido más accesible.
  • WordPress Development Tools und Accessibility Plugins: una lista de herramientas y recursos proporcionados por el equipo Make WordPress Accessible Team para ayudarte a probar y mejorar las características de accesibilidad de tus sitios web.
  • Make WordPress Accessible Homepage: el blog oficial del equipo Make WordPress Accessible, donde puedes leer las últimas noticias y contribur a hacer de WordPress un CMS más accesible.
  • WAVE Web Accessibility Evaluation Tool: esta herramienta es útil para comprobar la accesibilidad de tu sitio web. Después de un análisis, esta herramienta te mostrará los problemas que debes solucionar para cumplir con las Directrices de Accesibilidad. 
  • Stark: a la hora de construir tu sitio web en Sketch o Adobe XD, este plugin te ayudará a asegurarte de que los proyectos de tu sitio web sean accesibles desde el principio. 
  • Accessibility Color Wheel: con esta herramienta podrás elegir colores que tengan suficiente contraste y cumplan con las Directrices de Accesibilidad. También podrás ver cómo verán los colores que elijas las personas que padecen daltonismo. 
  • Axe Chrome Extension: si usas Chrome, esta extensión te permite comprobar cualquier sitio web en busca de problemas de accesibilidad con un solo clic.
  • The A11y Machine: puedes descargar The A11y Machine desde GitHub. Esta herramienta sirve para realizar pruebas de accesibilidad automatizadas. Es decir, se utiliza para comprobar la accesibilidad de cualquier sitio web. La herramienta genera entonces un informe detallado que puedes utilizar para mejorar la accesibilidad de tu sitio web.

Conclusión: Cómo garantizar la accesibilidad de tu sitio WordPress

WordPress como plataforma ya ofrece algunas funciones de accesibilidad desde el principio, pero todavía no es totalmente accesible. Si quieres desarrollar sitios web accesibles con WordPress, tendrás que tener en cuenta algunas cosas: 

  • Sigue las directrices oficiales de accesibilidad sobre contenido web (oficialmente: Web Content Accessibility Guidelines) así como las directrices de accesibilidad (WordPress Accessibility Guildelines), recogidas en el manual de revisión de temas o Theme Review Handbuch. 
  • Comienza con un theme WordPress accesible para reducir el tiempo de desarrollo y construir una base sólida para un sitio web accesible. 
  • Utiliza plugins WordPress accesibles y herramientas para probar tu sitio web terminado y asegurarte así de que es accesible para todos/as.

Si pones en práctica los consejos anteriores, estarás en camino de crear sitios web accesibles y hacer que internet sea más utilizable y accesible para todos/as. Si necesitas un hosting WordPress rápido y seguro para todos los sitios web accesibles que vas a crear, no dudes en solicitar tu prueba gratuita en RAIDBOXES

Tus dudas: Accesibilidad WordPress y sitios web sin barreras

¿Qué preguntas tienes para Maddy? No dudes en utilizar la función de comentarios. ¿Quieres más consejos sobre diseño y desarrollo web? Entonces síguenos en Twitter, Facebook o a través de nuestra newsletter.

Imagen del post: Unsplash

Maddy Osman es una especialista en estrategias de contenidos SEO. Trabaja con clientes seleccionados en el ámbito de WordPress y alojamientos web. Gracias a su formación en diseño web y WordPress ha adquirido un profundo conocimiento de SEO y sabe exactamente cómo conectar las marcas con contenido relevante SEO.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.