Accesibilidad en WordPress

Accesibilidad WordPress: Cómo crear un sitio web accesible

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

Acceso para todos/as: datos sobre la accesibilidad

WordPress lleva más del 35% de todos los sitios web. Los sitios web 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 porque WordPress es tan popular, tiene una gran influencia en la accesibilidad de la web. Sin embargo, el tema de la accesibilidad no siempre está en primer plano a la hora de desarrollar y rediseñar un sitio web. En cambio, muchos/as usuarios/as de WordPress se preocupan por elegir el tema 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 el hecho de que tu sitio web WordPress sea accesible para todos/as. 

Según las estadísticas de Interactive Accessibility, 56 millones de estadounidenses viven con una discapacidad. Además, el Centro de Investigación Pew afirma que el 54% de los adultos con discapacidades en EE.UU. utilizan internet con regularidad. Y eso es solo en Estados Unidos. En todo el mundo, estas cifras van en aumento.

Si ignoras la cuestión de la accesibilidad, ya estás excluyendo al 20% de la población mundial de poder utilizar tu sitio web. En resumen, descuidar la accesibilidad no es bueno para tu negocio. Pero lo más importante es que es terrible para crear un mundo más justo y equitativo. 

Así que si alguna vez te has preguntado cómo crear un sitio web accesible con WordPress, esta guía es para ti. Responderemos a algunas preguntas clave, como por ejemplo

  • ¿Qué es la accesibilidad web?
  • ¿Es accesible WordPress "out of the box"?
  • ¿Qué herramientas y plugins te ayudan a crear un sitio web WordPress accesible?

¿Qué es la accesibilidad web?

La accesibilidad web se refiere a las herramientas que permiten a las personas con discapacidades utilizar y acceder a la web. Esto es especialmente relevante para las discapacidades que pueden afectar a la forma en que las personas acceden y utilizan la web, incluyendo:

  • Discapacidades visuales
  • Deficiencias acústicas
  • Deterioro del lenguaje
  • 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 web debe ser accesible para todos/as, independientemente de su estatus o capacidad.

¿Es accesible WordPress "fuera de la box"? 

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 dashboard de administrador.

Accesibilidad WordPress: Cómo crear un sitio web accesible

Muchas cosas han cambiado desde entonces. En primer lugar, un pequeño grupo de voluntarios, el llamado Make WordPress Accesible Team, mejoró significativamente la accesibilidad en 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 (theme customizer). Además, se han añadido numerosos atajos de teclado al núcleo WordPress para agilizar la edición y el formato de posts y páginas web. 

Los estándar de codificación para la accesibilidad de WordPress se añadieron al manual básico de WordPress en marzo de 2016. Desde entonces, los themes y plugins han tenido que pasar una estricta comprobación de accesibilidad para poder ser clasificados como accesibles.

¿Qué es el Core Contributor Handbook?

Este manual define las normas de codificación que los/as desarrolladores/as de WordPress deben cumplir cuando añaden sus contribuciones al núcleo de WordPress y envían themes y plugins al repositorio oficial.

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

  • Desarrolladores/as de themes y plugins de terceros no siempre se adhieren a estas Directrices de Accesibilidad (Accessibility Guidelines). Como resultado, la mayoría de los problemas de accesibilidad en WordPress se deben a themes y plugins no accesibles.
  • El nuevo editor Gutenberg tenía 90 problemas de accesibilidad en el momento de su lanzamiento. (En este momento, v. fecha de este post, solo quedan 22 cuestiones sin resolver).
Accesibilidad WordPress: Cómo crear un sitio web accesible

Consejos para sitios web WordPress accesibles

A la hora de crear un sitio web accesible, existen ciertos principios establecidos en las directrices correspondientes, las Web Content Accessibility Guildelines . Definitivamente, deberías tenerlas en cuenta para asegurarte de que todo el mundo pueda utilizar tu sitio web. 

Lista de comprobación para la accesibilidad de sitios web WordPress

  • 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 utilice tu público para acceder a tu sitio 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 la información y 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 directrices que deberías seguir para crear un sitio web accesible con WordPress. 

Directrices para garantizar que tu sitio web WordPress sea perceptible

  • Los enlaces y los botones no deben distinguirse del resto del contenido solo por el color.
  • Ofrece ayuda Braille y proporciona alternativas de texto para los contenidos visuales y auditivos, como las imágenes y los vídeos.
  • Ajusta el ancho del texto y el ancho de la línea a tamaños que maximicen la legibilidad.
  • Asegúrate de que haya suficiente contraste entre el texto y el fondo. En otras palabras, por favor, 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 convulsiones y reacciones físicas.

Pautas para garantizar que tu sitio web WordPress sea operable

  • Abstente de utilizar CAPTCHA u ofrece varias 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 los/as usuarios/as previamente.
  • Asegúrate de que tus lectores/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 previa del usuario.

Pautas para que tu sitio web WordPress sea comprensible

  • A la hora de diseñar, piensa en diferentes ventanas de visualización y cambia la posición y la presentación de los elementos principales en consecuencia.
  • Utiliza títulos para definir las diferentes subsecciones de un sitio.
  • Evita utilizar jerga, términos difíciles y abreviaturas. En cambio, asegúrate de que el contenido de 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".

Pautas para garantizar la solidez de tu sitio web WordPress

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

"*"indica que los campos son obligatorios

Consentimiento*
Este campo es de validación y no debe modificarse.

Plugins y herramientas de accesibilidad WordPress

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

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

WP Accessibility

WP-Accesibilidad

WP Accessibility es uno de los mejores plugins de accesibilidad de WordPress del repositorio oficial de plugins 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 los temas de WP. 

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ñade descripciones largas a las fotos
  • Forzar atributos alt para las imágenes en el editor clásico

WP Accessibility también corrige problemas de accesibilidad en el núcleo 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 WordPress de accesibilidad para: empresas con sitios web existentes que quieren mejorar su accesibilidad.

Precio: puedes descargar WP Accessibility de forma gratuita desde el repositorio oficial. 

AccessibleWP Toolbar

Barra de herramientas WPAccessible

La barra de herramientas AccessibleWP, antes conocida como Accessible Poetry, tiene una calificación de 4,5 estrellas y más de 4.000 instalaciones activas. El plugin WordPress te facilita la habilitación de ciertas funciones y hace que tu sitio web sea más accesible. 

Características principales de la barra de herramientas AccessibleWP:

  • Activar la navegación por teclado para que los/as usuarios/as puedan navegar en 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 sitio web.

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

Precio: puedes descargar la barra de herramientas AccessibleWP de forma gratuita desde el repositorio oficial. 

Accesibilidad con un clic

Accesibilidad con un solo clic

El popular plugin de accesibilidad de WordPress, One Click Accessibility, fue desarrollado originalmente para el framework Pojo y ahora es compatible con todos los themes WordPress. El 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ñade el enfoque del contorno para los elementos enfocables
  • Eliminar los atributos de destino de los enlaces y añadir roles de referencia

El mejor plugin de accesibilidad para WordPress: sitios web creados originalmente en el marco de framework pojo.

Precio: One Click Accessibility se puede descargar gratuitamente desde el repositorio oficial. 

WordPress Accessibility Helper

Ayudante de accesibilidad de WordPress

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.

Principales características de WordPress Accessibility Helper

  • Añade enlaces de omisión
  • Ajusta el tamaño de la letra según tus preferencias
  • Comprueba si los sitios y los mensajes contienen errores de accesibilidad
  • Establece colores personalizados para un contraste mejor o más oscuro
  • Subraya o resalta todos los enlaces

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

Precio: WordPress Accessibility Helper puede descargarse gratuitamente. Puedes adquirir la versión Pro por 80 dólares, que te permite instalar el plugin en un sitio web y recibir tres meses de soporte técnico. 

Comprobación del cumplimiento de la ADA en WP Basic

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

Características principales de WP ADA Compliance Check Basic

  • Evaluar tu sitio web en términos de accesibilidad web
  • Ejecutar informes de accesibilidad
  • Obtener instrucciones fáciles de entender sobre cómo solucionar los problemas de accesibilidad
  • Corrección automática de los problemas de accesibilidad (solo en la versión Premium)
  • Problemas de identificación en los archivos del tema (solo en la versión Premium)

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

Precio: La descarga deWP ADA Compliance Check Basic es gratuita y está limitada a 25 entradas o páginas. La versión premium cuesta a partir de 165 dólares por un sitio web y te da 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. El plugin no añade ninguna función de accesibilidad a tu sitio web, sino que permite comprobar el grado de accesibilidad actual de tu sitio web WordPress. También realiza una comprobación automática de la accesibilidad de tu sitio web, que está controlada por el servicio de accesibilidad web Tenon.io

Características principales de Access Monitor

  • Planificar informes de accesibilidad semanales o mensuales
  • Probar un conjunto específico de páginas
  • Aprender sobre los problemas de accesibilidad que pueden ser determinados definitivamente por la máquina

El mejor plugin de accesibilidad para WordPress: Empresas que quieren una forma fácil y gratuita de identificar los problemas de accesibilidad de forma regular. 

Precio: Access Monitor se puede descargar gratuitamente desde el repositorio oficial. 

Una nota sobre los plugins WordPress y la accesibilidad

Es importante señalar que, al igual que los themes WordPress, los plugins pueden ser enviados por cualquier persona y pasan por una comprobación de accesibilidad opcional durante el proceso de revisión. En consecuencia, muchos plugins WordPress no cumplen las directrices de accesibilidad digital, y su uso puede hacer que tu sitio web deje de ser accesible. 

Ejemplos comunes de este tipo de plugins son los plugins de deslizamiento (slider) o carrusel, configurados para reproducirse automáticamente o detenerse con la interacción del teclado. Otro ejemplo es un plugin de formulario que no tiene los campos correctamente etiquetados. Teniendo esto en cuenta, deberías volver a probar la accesibilidad de tu sitio web WordPress cada vez que instales un nuevo plugin. 

Themes WordPress y accesibilidad

Si vas al repositorio oficial de WordPress y filtras la búsqueda de temas accesibles, encontrarás lamentablemente que solo hay 108 themes marcados como accesibles. 

Como se ha mencionado anteriormente, gracias a los esfuerzos del equipo de Make WordPress Accessible, los creadores de temas pueden someter su tema a una revisión de accesibilidad opcional durante el proceso de revisión. 

Para recibir la etiqueta "Accessibility Ready", un tema debe cumplir una serie de directrices de accesibilidad digital que figuran en el Manual de revisión de temas y en el Códice oficial de WordPress

Desarrollar sitios web WordPress accesibles

Seamos sinceros/as: la mayoría de usuarios WordPress se decantan por un tema premium de terceros, de mercados de terceros o por un theme completamente personalizado. 

Si eres desarrollador/ar y te encargas de crear un sitio web WordPress accesible, hay algunos themes que puedes utilizar como punto de partida.

Underscores

Underscores fue desarrollado por Automattic y es el punto de partida de la mayoría de los themes disponibles en WordPress.com. El theme contiene varias características accesibles. 

Genesis by StudioPress

Genesis by StudioPress es un popular framework premium que puede utilizarse para desarrollar tu tu propio tema hijo de Genesis accesible. Como alternativa, puedes utilizar uno de los temas hijo existentes con características accesibles.  

GeneratePress

GeneratePress es otro theme popular accesible y que puede ser utilizado como punto de partida para tu diseño.

WCAG Theme

WCAG Theme fue desarrollado 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 es un theme popular con versiones gratuitas y premium, con una etiqueta accesible, compatibilidad con los plugins page builder más populares y tiempos de carga rápidos.

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

Más recursos sobre la accesibilidad WordPress

Cuando se trata de WordPress y la accesibilidad, hay una gran cantidad de información en internet. Si quieres saber más sobre la accesibilidad, aquí tienes algunos buenos sitios para investigar:

  • Cómo hacer themes WordPress accesibles: una presentación de Joseph Karr O'Connor de WordCamp 2013 en Montreal. La presentación cubre la accesibilidad en general y su aplicación en WordPress, incluyendo cómo crear plugins, temas y widgets accesibles, y cómo hacer tu contenido más accesible.
  • Herramientas de desarrollo y plugins de accesibilidad WordPress: una lista de herramientas y recursos proporcionados por el equipo de Make WordPress Accessible para ayudarte a probar y mejorar las funciones de accesibilidad en tus sitios web.
  • Make WordPress Accessible Homepage: el blog oficial del equipo de Make WordPress Accessible, donde puedes leer las últimas noticias y ayudar a que WordPress sea más accesible.
  • WAVE Web Accessibility Evaluation Tool: Utiliza esta herramienta para comprobar la accesibilidad de tu sitio web WordPress. Después de un escaneo, la herramienta te mostrará los problemas que debes solucionar para cumplir con las directrices de accesibilidad. 
  • Potente: cuando empieces a crear tu sitio web en Sketch o Adobe XD, este plugin te ayudará a garantizar que tus proyectos de sitios web sean accesibles desde el principio. 
  • Accessibility Color Wheel: con la ayuda de esta herramienta puedes elegir colores que tengan suficiente contraste y cumplan con las directrices de accesibilidad. También puedes ver cómo verán los colores que elijas las personas que sufren daltonismo. 
  • Extensión Axe para Chrome: 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 la máquina A11y de GitHub. Esta herramienta sirve para realizar pruebas de accesibilidad automatizadas. Puedes así utilizarla para comprobar la accesibilidad de cualquier sitio web. La herramienta crea 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 web WordPress

WordPress, como plataforma, ya ofrece algunas funciones de accesibilidad out of the box , pero aún no es completamente accesible. Si quieres desarrollar sitios web accesibles con WordPress, debes tener en cuenta algunas cosas: 

  • Sigue las directrices oficiales de accesibilidad al contenido de la web, así como las directrices de accesibilidad de WordPress indicadas en el manual de revisión de themes. 
  • Comienza con un theme WordPress accesible para acortar el tiempo de desarrollo y crear una base sólida para un sitio web accesible. 
  • Utiliza los plugins y las herramientas de accesibilidad de WordPress para probar el sitio web terminado y asegúrate de que es accesible para todos/as.

Siguiendo los consejos anteriores, estarás en el buen camino para crear sitios web accesibles y hacer que internet sea más utilizable y accesible para todos/as. Y si necesitas un hosting WordPress rápido y seguro para todos los sitios web accesibles que vas a crear, no dudes en registrarte para una prueba gratuita en Raidboxes. 

Tus dudas sobre la accesibilidad de WordPress

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

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

2 Comentarios en "Accesibilidad de WordPress: Cómo crear un sitio web accesible".

  1. ¡Genial y muy completo el artículo!. Justo estaba buscando información sobre accesibilidad en WordPress, y después de varios intentos fallidos he llegado hasta este post que es bastante completo y esclarecedor.

    Mil gracias!

Escribe un comentario

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