Accesibilidad en WordPress con OneTap: qué es, cómo aplicarla y nuestro caso real

Una web accesible es una web que puede usar cualquier persona: alguien con baja visión que necesita un texto más grande, una persona que navega solo con el teclado, quien usa un lector de pantalla o, simplemente, alguien que consulta tu página con el móvil a pleno sol. La accesibilidad en WordPress no es un extra: es parte de hacer bien una web. En este artículo explicamos qué implica, cómo ayuda el plugin OneTap y qué hemos aplicado en nuestra propia web, localhostservices.es.

Por qué la accesibilidad en WordPress importa

  • Más clientes: una parte importante de la población tiene algún tipo de discapacidad o dificultad (visual, auditiva, motora o cognitiva), y con la edad estas necesidades aumentan. Si tu web no es accesible, esos usuarios se van.
  • Mejor SEO: muchas buenas prácticas de accesibilidad (encabezados ordenados, textos alternativos en las imágenes, enlaces descriptivos) son también señales que ayudan a Google a entender tu contenido.
  • Obligaciones legales: la normativa europea y española (Ley Europea de Accesibilidad) ya exige que determinados servicios digitales, como el comercio electrónico, sean accesibles, y es una tendencia que va a más.
  • Kit Digital: la solución «Sitio web y presencia básica en internet» exige que la web cumpla las pautas WCAG 2.1 de nivel AA.

WCAG 2.1 AA: el estándar de referencia

Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1 del W3C son el estándar internacional. Se organizan en cuatro principios: el contenido debe ser perceptible (se puede ver u oír), operable (se puede usar con ratón, teclado o tecnologías de apoyo), comprensible (textos claros y comportamiento predecible) y robusto (funciona con distintos navegadores y lectores de pantalla). El nivel AA es el que se exige habitualmente a empresas y administraciones.

Qué depende de ti en una web WordPress

WordPress es una buena base, pero la accesibilidad depende sobre todo de cómo se construye y se mantiene cada web:

  • Un tema accesible y bien programado, con navegación por teclado y enlaces de salto al contenido.
  • Encabezados en orden: un único H1 por página y H2/H3 que reflejen la estructura real del contenido.
  • Texto alternativo en todas las imágenes que aportan información.
  • Contraste suficiente entre el texto y el fondo (al menos 4,5:1 para texto normal).
  • Formularios con etiquetas claras y mensajes de error comprensibles.
  • Enlaces descriptivos: mejor «ver nuestros servicios» que «haz clic aquí».

OneTap: una barra de accesibilidad para WordPress

OneTap es un plugin gratuito, uno de los más usados para accesibilidad en WordPress, que añade a la web un botón flotante con una barra de accesibilidad. Desde ella, cada visitante puede adaptar la página a sus necesidades sin que tengas que tocar el diseño.

En su versión gratuita incluye, entre otras funciones:

  • Ajuste del tamaño de letra, del interlineado, del espaciado entre letras y de la alineación del texto.
  • Fuente de lectura más legible y cursor grande.
  • Modos de contraste claro, alto contraste y monocromo.
  • Resaltado de enlaces y de contenido, guía y máscara de lectura.
  • Ocultar imágenes y detener animaciones.

La versión PRO añade funciones como lectura en voz alta, fuente para dislexia, navegación por teclado avanzada y perfiles predefinidos (por ejemplo, para personas con TDAH o epilepsia). El plugin incluye además un generador de declaración de accesibilidad y no recopila datos de los usuarios.

Eso sí, conviene tenerlo claro: una barra de accesibilidad ayuda, pero no hace accesible una web por sí sola. Si las imágenes no tienen texto alternativo o los encabezados están desordenados, el plugin no lo arregla. Es un complemento a una web bien construida, no un sustituto.

Caso real: accesibilidad en WordPress en localhostservices.es

Aplicamos todo esto en nuestra propia web, que está hecha con WordPress y el tema Astra. Estos son los pasos que hemos dado:

  • Barra OneTap en todas las páginas, con la mayoría de módulos gratuitos activados. Se abre desde el botón flotante o con el atajo Alt + . (Windows) o ⌘ + . (Mac).
  • Un único H1 por página: la portada mostraba dos (el título «Inicio» del tema y el titular principal); ocultamos el primero. La página del blog no tenía ninguno y le añadimos uno.
  • Textos alternativos descriptivos en todas las imágenes de las páginas y de los artículos.
  • Declaración de accesibilidad propia, enlazada en el pie de todas las páginas y también disponible desde la barra de OneTap. Combinamos el texto que genera el plugin con información específica de nuestra web: estándar de referencia, estado de cumplimiento, medidas adoptadas, contenido que puede no ser accesible y tres canales de contacto. Puedes consultarla en nuestra declaración de accesibilidad.

En la declaración indicamos que la web es «parcialmente conforme» con las WCAG 2.1 AA. Preferimos ser honestos: el siguiente paso es una revisión completa con herramientas como WAVE o Lighthouse, centrada en el contraste de colores y los formularios, para corregir lo que falte y poder declarar la conformidad total.

Checklist rápida de accesibilidad en WordPress

  • ¿Cada página tiene un solo H1 y los encabezados siguen un orden lógico?
  • ¿Todas las imágenes informativas tienen texto alternativo?
  • ¿Se puede navegar por toda la web usando solo el teclado?
  • ¿El contraste de los textos es suficiente?
  • ¿Los formularios tienen etiquetas visibles?
  • ¿Tienes publicada y enlazada una declaración de accesibilidad?
  • ¿Ofreces una barra de accesibilidad como OneTap para que el usuario adapte la web?

Conclusión

La accesibilidad en WordPress combina dos cosas: una web bien construida y herramientas que permitan a cada visitante adaptarla. OneTap cubre la segunda parte de forma sencilla y gratuita, pero la base sigue siendo el trabajo en el contenido y en el diseño. Si quieres mejorar la velocidad y la experiencia de tu web, te puede interesar también nuestra guía sobre Core Web Vitals en WordPress o qué incluye un buen mantenimiento web WordPress.

¿Quieres que revisemos la accesibilidad de tu web? En Localhost Services analizamos tu WordPress, corregimos los problemas y preparamos la declaración de accesibilidad. Contacta con nosotros.

Scroll al inicio

Esta actuación está impulsada por el Plan de Recuperación, Transformación y Resiliencia, financiada por la Unión Europea – Next Generation EU

Financiado por la Unión Europea - NextGenerationEU. Plan de Recuperación, Transformación y Resiliencia. Programa Kit Digital financiado por los fondos Next Generation del Mecanismo de Recuperación y Resiliencia