Diseño web accesible con WordPress: qué necesitas para cumplir el nivel AA

Una web puede verse perfecta en tu ordenador y convertirse en un laberinto para otra persona. Un menú que no responde al teclado, un formulario que no explica dónde está el error o un botón sin nombre pueden dejar fuera a usuarios que necesitan navegar de otra manera.

WordPress puede ser una buena base para crear una web accesible, pero no hace el trabajo por sí solo. El resultado depende del tema, el constructor visual, los plugins, el código, los contenidos y las comprobaciones realizadas durante el proyecto.

¿Se puede crear una web accesible con WordPress?

Sí. WordPress puede utilizarse para desarrollar páginas que sigan buenas prácticas de accesibilidad y que se preparen tomando como referencia las pautas WCAG.

El propio proyecto WordPress trabaja para que el código nuevo y actualizado de su núcleo siga los criterios de los niveles A y AA. Esto proporciona una buena base, pero solo cubre una parte del resultado final.

En cuanto instalamos un tema, añadimos un constructor, incorporamos plugins, subimos imágenes y empezamos a crear contenidos, aparecen nuevas decisiones que pueden mejorar o empeorar la accesibilidad.

Por ejemplo, WordPress puede generar correctamente la estructura de un botón, pero alguien puede diseñarlo con un contraste insuficiente. Puede admitir textos alternativos en las imágenes, pero seguirá sin saber qué descripción necesita cada fotografía. Puede ofrecer formularios bien construidos, pero también podemos estropearlos ocultando las etiquetas o mostrando mensajes de error que nadie entiende.

Qué significa que una web sea accesible

Una web accesible está diseñada y desarrollada para que personas con capacidades y formas de navegación diferentes puedan percibir el contenido, comprenderlo, recorrerlo e interactuar con él.

No hablamos únicamente de personas ciegas o de lectores de pantalla. La accesibilidad también puede ayudar a usuarios con baja visión, dificultades auditivas, movilidad reducida, problemas cognitivos, lesiones temporales o limitaciones relacionadas con el dispositivo y el entorno.

Algunos ejemplos cotidianos ayudan a entenderlo:

• Una persona que no puede manejar el ratón necesita navegar mediante teclado.
• Una persona con baja visión puede necesitar ampliar el contenido sin que la página se rompa.
• Una persona ciega necesita que los botones, títulos, imágenes y formularios tengan una estructura comprensible para su lector de pantalla.
• Una persona con dificultades auditivas necesita subtítulos o alternativas para los contenidos en vídeo.
• Una persona con problemas de concentración necesita textos claros, instrucciones comprensibles y recorridos previsibles.
• Una persona con temblores o poca precisión necesita zonas de pulsación suficientemente cómodas.

Muchas de estas mejoras también ayudan al resto de usuarios. Un formulario claro, un texto legible y una navegación ordenada no molestan a nadie.

Qué significa el nivel AA de accesibilidad

Las pautas WCAG 2.2 organizan la accesibilidad bajo cuatro principios: el contenido debe ser perceptible, operable, comprensible y robusto.

Principio	Qué significa en una web
Perceptible	La información debe presentarse de forma que pueda percibirse mediante diferentes sentidos o tecnologías de apoyo.
Operable	La navegación y los controles deben poder utilizarse con teclado, ratón u otros sistemas de entrada.
Comprensible	El contenido, las instrucciones y el funcionamiento de la interfaz deben resultar claros y previsibles.
Robusto	La web debe ser compatible con navegadores, lectores de pantalla y otras tecnologías actuales y futuras.

Los criterios se dividen en tres niveles:

• Nivel A: recoge requisitos básicos. Si no se cumplen, algunas personas pueden encontrar barreras graves para utilizar la página.
• Nivel AA: incluye todos los requisitos A y AA. Es el nivel utilizado habitualmente como referencia en proyectos y requisitos de accesibilidad.
• Nivel AAA: añade criterios más exigentes, aunque no siempre es posible cumplirlos todos en cualquier tipo de contenido o web.

Por eso conviene ser prudente con frases como “web 100 % accesible” o “accesibilidad garantizada”. La accesibilidad no se demuestra con una etiqueta bonita colocada en el pie de página.

WordPress no hace accesible una web por sí solo

WordPress es el gestor de contenidos. La página final depende de muchas otras piezas:

• El tema utilizado.
• El constructor visual.
• Los plugins instalados.
• El código personalizado.
• La estructura de encabezados.
• Los colores elegidos.
• Los textos de botones y enlaces.
• Las imágenes y sus alternativas.
• Los formularios.
• Los vídeos y documentos descargables.
• Los contenidos que se publiquen después.

Una instalación limpia puede empezar razonablemente bien y perder accesibilidad a medida que añadimos elementos. Basta con incorporar un carrusel difícil de manejar, un formulario sin etiquetas o una ventana emergente que atrapa el foco para crear una barrera nueva.

Esto no convierte a WordPress en una mala herramienta. Significa que debemos utilizarlo con criterio. Una caja de herramientas puede contener todo lo necesario para montar una puerta, pero todavía hay que colocarla recta y comprobar que se abre.

Qué elementos hay que trabajar en una web accesible

Una estructura de encabezados ordenada

Los encabezados ayudan a entender la jerarquía del contenido. Debe existir un orden lógico entre H1, H2 y H3, sin utilizarlos únicamente porque tengan un tamaño visual que nos gusta.

Una persona que utiliza un lector de pantalla puede recorrer los encabezados para orientarse, de la misma manera que otros usuarios escanean visualmente una página antes de leerla.

Contraste y legibilidad

El texto necesita suficiente contraste respecto al fondo. Los botones, enlaces, campos y mensajes tampoco deberían depender de diferencias tan pequeñas de color que resulten difíciles de distinguir.

También conviene cuidar el tamaño de letra, la altura de línea, la longitud de los párrafos y la posibilidad de ampliar el contenido sin perder información ni funcionalidad.

El gris muy claro sobre fondo blanco puede quedar elegante en una presentación. Cuando toca leerlo desde un móvil al sol, la elegancia empieza a parecerse bastante a una desaparición.

Navegación completa mediante teclado

La página debe poder recorrerse sin utilizar el ratón. Menús, botones, enlaces, ventanas, formularios y otros controles deben recibir el foco en un orden comprensible.

También debe verse con claridad qué elemento está seleccionado. Eliminar el contorno del foco por motivos estéticos puede dejar a una persona navegando a oscuras.

Enlaces y botones con nombres comprensibles

Textos como “haz clic aquí”, “más” o “ver” pueden perder sentido cuando se leen fuera de contexto.

Es preferible utilizar expresiones que expliquen la acción:

• Solicitar presupuesto de diseño web.
• Consultar los servicios incluidos.
• Descargar la guía de accesibilidad.
• Ver los proyectos realizados.

Los botones deben estar construidos como botones y los enlaces como enlaces. Hacer que cualquier bloque visual sea pulsable mediante código improvisado puede crear problemas para el teclado y las tecnologías de apoyo.

Imágenes con alternativas adecuadas

Las imágenes informativas necesitan un texto alternativo que comunique su función o contenido. Las imágenes decorativas, en cambio, deben configurarse para que no añadan ruido innecesario al lector de pantalla.

El texto alternativo no es un lugar para colocar una lista de palabras SEO. Debe explicar lo que la persona necesita saber sobre esa imagen dentro de la página.

Formularios claros y fáciles de corregir

Cada campo necesita una etiqueta comprensible. Las instrucciones deben indicar qué información se espera y los errores deben explicar qué ha ocurrido y cómo solucionarlo.

No basta con marcar un campo en rojo. Una persona que no percibe ese color o que utiliza un lector de pantalla necesita recibir el mensaje de otra manera.

También conviene reducir los campos innecesarios. Un formulario accesible de quince preguntas sigue siendo un formulario de quince preguntas, y eso no alegra la tarde a nadie.

Contenido multimedia con alternativas

Los vídeos pueden necesitar subtítulos, transcripción o audiodescripción según el contenido. Los audios necesitan una alternativa textual cuando la información no está disponible de otra forma.

Los controles del reproductor deben poder utilizarse mediante teclado y tener nombres comprensibles.

Idioma, títulos y mensajes comprensibles

La página debe indicar correctamente su idioma y avisar cuando una parte concreta cambia de lengua. Los títulos deben describir el contenido y los mensajes importantes no deberían desaparecer antes de que el usuario pueda comprenderlos.

Elementos móviles que no provoquen problemas

Carruseles automáticos, animaciones, parpadeos y movimientos pueden dificultar la lectura o provocar molestias. Cuando se utilicen, conviene dar al usuario control para pausarlos o detenerlos.

Muchas veces la mejor mejora de accesibilidad para un carrusel es preguntarnos si realmente necesitábamos el carrusel.

Temas y constructores WordPress accesibles

Elegir un tema bien construido ayuda, pero la etiqueta “accesible” no debe entenderse como una garantía permanente sobre toda la web.

Un tema puede ofrecer:

• HTML semántico bien organizado.
• Navegación mediante teclado.
• Indicadores de foco visibles.
• Menús comprensibles para lectores de pantalla.
• Contrastes razonables en su configuración inicial.
• Enlaces para saltar directamente al contenido.

Después podemos alterar todo eso desde el constructor visual, los estilos personalizados o los plugins.

Los constructores WordPress ofrecen mucha libertad, pero esa libertad exige atención. Es fácil crear columnas con un orden visual diferente al orden de lectura, utilizar iconos sin nombre, repetir encabezados sin jerarquía o montar un formulario bonito que no se entiende mediante teclado.

Por qué un plugin de accesibilidad no arregla toda la web

Los plugins pueden ayudar a resolver tareas concretas. Algunos facilitan avisos, mejoras de navegación, controles visuales o comprobaciones durante la edición.

Lo que no pueden hacer de forma automática es comprender todas las decisiones de diseño y contenido de una web.

Una web puede mostrar un icono de accesibilidad en una esquina y seguir teniendo barreras por todas partes. Es como colocar una rampa decorativa delante de una puerta que continúa cerrada: parece que hemos hecho algo, pero la persona sigue sin poder entrar.

Además, algunas capas automáticas modifican la página desde fuera sin corregir el código y los contenidos de origen. Esto puede generar una falsa sensación de seguridad y dificultar la detección de los problemas reales.

La accesibilidad debe trabajarse dentro del diseño y del desarrollo, no pegarse al final como una pegatina.

Cómo comprobar la accesibilidad de una web WordPress

La revisión combina herramientas automáticas y comprobaciones manuales. Las herramientas ayudan a detectar determinados fallos, pero no pueden decidir por sí solas si toda la experiencia resulta comprensible y utilizable.

Pruebas automáticas

Sirven para localizar problemas como:

• Contrastes insuficientes.
• Imágenes sin atributo alternativo.
• Campos sin etiquetas asociadas.
• Identificadores duplicados.
• Errores de estructura HTML.
• Algunos nombres accesibles ausentes.

Estas pruebas son un buen comienzo, no un certificado final.

Revisión mediante teclado

Desconecta el ratón e intenta recorrer toda la página utilizando Tab, Mayúsculas más Tab, Enter, Espacio y las teclas de dirección cuando proceda.

Comprueba:

• Si puedes acceder a todos los controles.
• Si el orden resulta lógico.
• Si siempre sabes dónde está el foco.
• Si puedes abrir y cerrar menús y ventanas.
• Si existe algún componente del que no puedas salir.

Prueba con ampliación

Amplía la página y revisa si el contenido sigue siendo legible, si aparecen desplazamientos incómodos y si los botones o campos quedan ocultos.

Prueba con lector de pantalla

Un lector de pantalla ayuda a detectar encabezados mal organizados, botones sin nombre, imágenes mal descritas, formularios confusos y cambios que no se anuncian correctamente.

Revisión humana del contenido

Hay cuestiones que ninguna herramienta comprende completamente:

• Si un texto alternativo explica bien la imagen.
• Si las instrucciones son fáciles de seguir.
• Si un mensaje de error ayuda realmente a corregirlo.
• Si el orden de lectura tiene sentido.
• Si los textos de los enlaces describen bien su destino.
• Si la navegación resulta previsible.

Errores habituales en una web WordPress

Error	Problema que puede provocar	Qué conviene hacer
Contraste insuficiente	El texto y los controles resultan difíciles de distinguir.	Revisar colores y estados normales, activos y de foco.
Encabezados elegidos por tamaño	La estructura pierde sentido para lectores de pantalla.	Crear una jerarquía lógica de H1, H2 y H3.
Botones formados solo por iconos	La acción puede no tener un nombre comprensible.	Añadir un nombre accesible y comprobarlo con tecnologías de apoyo.
Foco invisible	La persona que navega con teclado no sabe dónde se encuentra.	Mantener un indicador de foco visible y con buen contraste.
Formularios sin etiquetas	No queda claro qué información corresponde a cada campo.	Utilizar etiquetas asociadas e instrucciones comprensibles.
Errores indicados solo mediante color	Algunos usuarios no reciben información suficiente.	Añadir mensajes textuales y asociarlos al campo correspondiente.
Carruseles automáticos	El contenido cambia antes de poder leerse o interactuar.	Ofrecer controles para pausar y revisar si el carrusel es necesario.
Imágenes con ALT lleno de palabras clave	El lector recibe una descripción poco útil y artificial.	Describir la función real de la imagen dentro del contenido.
Ventanas emergentes mal construidas	El foco se pierde o queda atrapado fuera del contenido visible.	Controlar apertura, foco, cierre y retorno al elemento inicial.

Cuándo conviene revisar una web existente

No hace falta esperar a rehacer toda la página para mejorar su accesibilidad. Una revisión puede servir para detectar barreras y establecer prioridades.

Conviene revisar especialmente una web cuando:

• Se diseñó hace años y ha ido acumulando plugins y cambios.
• El tema o el constructor se han modificado muchas veces.
• Los formularios son importantes para solicitar citas o presupuestos.
• Se publican documentos, vídeos o contenidos multimedia.
• Se dirige a administraciones, educación, salud o servicios de interés general.
• Los usuarios han comunicado dificultades para navegar o completar tareas.
• Se está preparando un rediseño o cambio de plataforma.

Lo sensato es priorizar primero los recorridos importantes: navegación, contacto, formularios, servicios principales, acceso a información y cualquier proceso necesario para utilizar la web.

Intentar arreglarlo todo instalando cinco plugins puede terminar añadiendo más botones, más scripts y más problemas. A veces toca reparar componentes. Otras veces compensa rehacer un bloque que nació torcido.

La accesibilidad también depende de los contenidos

Una web puede entregarse con una base cuidada y deteriorarse con las publicaciones posteriores.

Quien actualiza la página debe conocer unas pautas mínimas:

• Mantener la jerarquía de encabezados.
• Escribir enlaces descriptivos.
• Añadir alternativas a las imágenes informativas.
• No introducir texto dentro de imágenes cuando pueda escribirse como HTML.
• Subtitular vídeos cuando sea necesario.
• Revisar los documentos descargables.
• No usar únicamente el color para comunicar información.
• Comprobar los nuevos formularios, ventanas y componentes.

Por eso la accesibilidad no es una tarea que se marca una vez y desaparece. Cada modificación puede conservar lo trabajado o abrir una barrera nueva.

Un servicio de mantenimiento WordPress puede ayudar a revisar cambios técnicos, aunque el mantenimiento habitual tampoco sustituye una evaluación específica de accesibilidad cuando el proyecto la necesita.

Cómo planteamos una web WordPress más accesible

En ideaWeb podemos trabajar el diseño web WordPress teniendo en cuenta criterios de accesibilidad desde la estructura inicial.

Esto puede incluir, según el alcance del proyecto:

• Una jerarquía clara de páginas y encabezados.
• Diseño responsive y contenido ampliable.
• Contrastes y tipografías legibles.
• Navegación comprensible.
• Botones y enlaces con textos claros.
• Formularios bien etiquetados.
• Revisión del funcionamiento mediante teclado.
• Uso razonado de imágenes y textos alternativos.
• Selección cuidadosa de temas, plugins y componentes.
• Comprobaciones automáticas y manuales dentro del alcance acordado.

Preferimos explicarlo de esta manera antes que colocar un sello alegre y esperar que nadie intente navegar con teclado. La accesibilidad merece algo más serio que una promesa escrita deprisa.

Una web accesible también debe seguir siendo una buena web

Accesibilidad, diseño y facilidad de uso no son tres caminos separados. Una web puede ser visualmente cuidada, clara y accesible al mismo tiempo.

De hecho, muchas decisiones que reducen barreras también mejoran la experiencia general:

• Textos fáciles de leer.
• Menús previsibles.
• Formularios que explican los errores.
• Botones visibles.
• Contenido bien ordenado.
• Navegación cómoda desde móvil.
• Menos elementos que distraen o bloquean.

El objetivo no es crear una versión gris, aburrida o distinta para determinadas personas. El objetivo es diseñar mejor desde el principio para que más usuarios puedan utilizar la misma página.

Preguntas frecuentes sobre WordPress y accesibilidad AA

¿WordPress es accesible?

WordPress puede proporcionar una buena base, pero la accesibilidad de la web final depende también del tema, los plugins, el constructor, el diseño, el código y los contenidos.

¿Qué significa accesibilidad AA?

Significa que la página satisface todos los criterios aplicables de nivel A y AA de la versión de WCAG utilizada. Cumplir solo algunos criterios no permite declarar conformidad AA.

¿Un plugin puede hacer accesible mi web?

Un plugin puede ayudar con funciones concretas, pero no corrige por sí solo la estructura, los formularios, el contraste, el teclado, los textos alternativos ni todos los componentes de una web.

¿Cómo sé si mi web WordPress es accesible?

Hay que combinar herramientas automáticas con pruebas manuales, navegación mediante teclado, revisión con tecnologías de apoyo y análisis de los contenidos y recorridos principales.

¿Una buena puntuación automática garantiza el nivel AA?

No. Las herramientas automáticas detectan determinados errores, pero no pueden evaluar por completo la comprensión, el orden de lectura, la calidad de los textos alternativos ni toda la experiencia de uso.

¿Una web accesible tiene que ser visualmente sencilla?

No. Puede tener un diseño cuidado y personalidad visual. Lo importante es mantener contraste, estructura, legibilidad, controles comprensibles y formas de interacción accesibles.

¿Hay que revisar también los contenidos nuevos?

Sí. Nuevas imágenes, vídeos, formularios, documentos y bloques pueden introducir barreras aunque la web original estuviera bien planteada.

¿Se puede mejorar la accesibilidad de una web ya publicada?

Sí. Se pueden revisar y corregir muchas barreras sin rehacer toda la página, aunque algunos temas, constructores o componentes pueden requerir cambios más profundos.

¿Diseñar siguiendo buenas prácticas significa cumplir WCAG AA?

No necesariamente. Para declarar conformidad AA hay que evaluar el alcance completo y comprobar todos los criterios aplicables de nivel A y AA.

¿ideaWeb puede diseñar una web WordPress teniendo en cuenta la accesibilidad?

Sí, podemos plantear el diseño y la estructura teniendo en cuenta buenas prácticas de accesibilidad. Los proyectos que necesiten auditoría formal, certificación o requisitos específicos deben valorarse con un alcance propio.

Puedes consultar las pautas WCAG 2.2 del W3C y la documentación de accesibilidad de WordPress para conocer los criterios técnicos de referencia.