La accesibilidad web significa construir sitios web que las personas con discapacidades puedan usar de manera efectiva. Esto incluye a personas que utilizan lectores de pantalla, navegación solo con teclado, control por voz, lupas de pantalla o que tienen limitaciones en la visión del color. En el ecosistema de WordPress, la accesibilidad es tanto un requisito legal en muchas jurisdicciones como una forma práctica de llegar a una audiencia más amplia: más de 1 mil millones de personas en todo el mundo tienen algún tipo de discapacidad.
En esta guía, cubrimos pasos prácticos para hacer que tu sitio de WordPress sea accesible, siguiendo las Pautas de Accesibilidad al Contenido Web (WCAG) 2.2 en el nivel AA, el estándar más comúnmente requerido por las leyes de accesibilidad, incluyendo la ADA (EE. UU.), EAA (UE) y AODA (Canadá).
Comprendiendo los Principios de WCAG 2.2
WCAG está organizada en torno a cuatro principios, conocidos como POUR:
| Principio | Qué Significa | Ejemplos de WordPress |
|---|---|---|
| Perceptible | Los usuarios pueden percibir el contenido a través de la vista, el oído o el tacto | Texto alternativo para imágenes, subtítulos para videos, suficiente contraste de color |
| Operable | Los usuarios pueden navegar e interactuar con la interfaz | Navegación con teclado, enlaces de salto, sin trampas de teclado |
| Comprensible | Los usuarios pueden entender el contenido y cómo usar la interfaz | Lenguaje claro, navegación consistente, mensajes de error |
| Robusto | El contenido funciona en diferentes navegadores, dispositivos y tecnologías de asistencia | HTML válido, roles ARIA adecuados, marcado semántico |
Elegir un Tema Accesible
La estructura HTML y CSS de tu tema de WordPress forman la base de la accesibilidad de tu sitio. Al elegir un tema de WordPress, evalúa estos factores de accesibilidad:
- HTML semántico: El tema utiliza elementos HTML5 adecuados (header, nav, main, article, aside, footer) en lugar de divs genéricos para todo
- Jerarquía de encabezados: H1 → H2 → H3 sigue un orden lógico sin saltar niveles
- Enlaces de salto: Un enlace "Saltar al contenido" está presente como el primer elemento enfocable, permitiendo a los usuarios de teclado omitir la navegación
- Navegación por teclado: Todos los elementos interactivos (enlaces, botones, formularios) son alcanzables y utilizables con la tecla Tab
- Indicadores de enfoque: Los elementos enfocados tienen un contorno o resaltado visible (no se eliminan con outline: none)
- Contraste de color: El texto cumple con las proporciones de contraste WCAG AA (4.5:1 para texto normal, 3:1 para texto grande)
Los temas etiquetados como "listos para la accesibilidad" en WordPress.org han pasado una revisión básica de accesibilidad. Sin embargo, esta etiqueta indica un punto de partida, no el cumplimiento total de WCAG. Entre los temas populares, GeneratePress está notablemente bien codificado con HTML semántico limpio y puntos de referencia ARIA adecuados.
Accesibilidad de Imágenes
Texto Alternativo
Cada imagen significativa necesita un texto alternativo descriptivo. WordPress facilita esto: el campo de texto alternativo está disponible en la Biblioteca de Medios y al insertar imágenes en el contenido.
| Tipo de Imagen | Enfoque de Texto Alternativo | Ejemplo |
|---|---|---|
| Foto de producto | Describe el producto | "Bolso cruzado de cuero rojo con hebilla dorada, vista frontal" |
| Captura de pantalla | Describe lo que muestra la captura de pantalla | "Panel de WordPress mostrando la página de Plugins con 12 plugins activos" |
| Infografía | Resume la información clave | "Gráfico comparativo: características de Elementor vs Gutenberg. Elementor tiene más de 100 widgets, Gutenberg tiene más de 90 bloques" |
| Imagen decorativa | Texto alternativo vacío (alt="") | Patrones de fondo, divisores, íconos puramente decorativos |
| Gráfico | Describe la tendencia o el dato clave | "Gráfico de líneas que muestra un aumento del 45% en el tráfico del sitio web de enero a diciembre de 2025" |
Optimización de Imágenes para Accesibilidad
- No utilices imágenes de texto; utiliza texto real estilizado con CSS en su lugar
- Asegúrate de que el texto incrustado en las imágenes cumpla con los requisitos de contraste
- Proporciona descripciones largas para imágenes complejas (gráficos, diagramas) utilizando un párrafo adyacente o el atributo longdesc
- Asegúrate de que las imágenes tengan dimensiones apropiadas para que no causen cambios de diseño (CLS)
Navegación por Teclado
Muchos usuarios navegan por sitios web completamente con
un teclado: Tab para avanzar, Shift+Tab para retroceder, Enter para activar enlaces/botones, Espacio para alternar casillas de verificación y hacer clic en botones, y Escape para cerrar modales.
Problemas Comunes de Accesibilidad con el Teclado
- Trampas de enfoque: Diálogos modales que no permiten volver a tabular al contenido principal (los modales deben atrapar el enfoque dentro del modal, y Escape debe cerrarlos)
- Indicadores de enfoque faltantes: CSS que elimina el contorno predeterminado en los elementos enfocados (nunca use *:focus { outline: none } globalmente)
- Elementos no interactivos con controladores de clic: Divs o spans con eventos onClick que no son accesibles por teclado (use botones o enlaces en su lugar)
- Menús desplegables que solo se abren al pasar el mouse: Los usuarios de teclado no pueden activar estados de hover. Los menús deben abrirse al enfocar/Enter también
- Componentes personalizados sin ARIA: Pestañas, acordeones y carruseles construidos sin los roles ARIA y controladores de teclado adecuados
Color y Contraste
WCAG AA requiere estas proporciones de contraste mínimas:
| Elemento | Proporción Mínima | Ejemplo (Aprobado) | Ejemplo (Reprobado) |
|---|---|---|---|
| Texto normal (<18px) | 4.5:1 | #333 sobre #fff (12.6:1) | #999 sobre #fff (2.8:1) |
| Texto grande (≥18px o ≥14px en negrita) | 3:1 | #555 sobre #fff (7.4:1) | #aaa sobre #fff (2.3:1) |
| Componentes de UI (botones, entradas) | 3:1 | Botón azul #2563eb (4.6:1) | Botón azul claro #93c5fd (1.8:1) |
| Contenido no textual (iconos, bordes) | 3:1 | Icono oscuro sobre fondo claro | Icono gris claro sobre blanco |
Utilice herramientas como el Contrast Checker de WebAIM o la extensión del navegador axe para verificar las proporciones de contraste. No confíe solo en el color para transmitir información: use etiquetas de texto, patrones o iconos además de la codificación por color.
Accesibilidad de Formularios
Los formularios son una de las áreas más críticas para la accesibilidad. Ya sea utilizando bloques de Gutenberg, Gravity Forms, o WPForms:
- Etiquete cada entrada: Utilice el elemento <label> asociado con cada entrada a través del atributo for/id. El texto de marcador de posición no es un sustituto de las etiquetas
- Agrupe campos relacionados: Utilice <fieldset> y <legend> para grupos de entradas relacionadas (por ejemplo, campos de dirección de envío)
- Proporcione mensajes de error: Cuando la validación falla, identifique qué campo tiene el error y describa cómo solucionarlo. Use aria-describedby para asociar mensajes de error con sus campos
- Marque campos obligatorios: Utilice el atributo required e indique visualmente los campos obligatorios con texto (no solo un asterisco)
- Soporte para autocompletar: Agregue atributos de autocompletar apropiados (nombre, correo electrónico, tel, dirección-línea1) para que los navegadores puedan completar automáticamente los datos del formulario
Accesibilidad del Contenido
Estructura de Encabezados
Una jerarquía de encabezados adecuada ayuda a los usuarios de lectores de pantalla a entender la estructura de la página y navegar entre secciones. Reglas:
- Un H1 por página (el título de la página/publicación)
- H2 para secciones principales
- H3 para subsecciones dentro de un H2
- Nunca salte niveles (H2 → H4 sin H3 es incorrecto)
- No use encabezados para estilo visual: use clases CSS en su lugar
Texto de Enlace
Evite texto de enlace genérico que no tiene sentido fuera de contexto:
| Pobre Texto de Enlace | Texto de Enlace Accesible |
|---|---|
| "Haga clic aquí" | "Lea la guía de seguridad de WordPress" |
| "Leer más" | "Lea la revisión completa de Elementor Pro" |
| "Aprender más" | "Aprenda cómo optimizar el proceso de pago de WooCommerce" |
| "Aquí" | "Descargue el informe de benchmarks de rendimiento" |
Tablas
Las tablas de datos deben incluir:
- <thead> con elementos <th> para encabezados de columna (con scope="col")
- <th scope="row"> para encabezados de fila
- Un elemento <caption> que describa el propósito de la tabla
- Estructura simple: evite celdas combinadas cuando sea posible, ya que son difíciles de interpretar para los lectores de pantalla
Pruebas de Accesibilidad de Su Sitio
| Herramienta | Tipo | Qué Prueba |
|---|---|---|
| axe DevTools | Extensión del navegador | Automatizado WCA |
| Detección de violaciones G | ||
| WAVE | Extensión de navegador / web | Evaluación de accesibilidad visual con anotaciones en línea |
| Lighthouse | Chrome DevTools | Auditoría de accesibilidad con puntuaciones y recomendaciones |
| Pruebas de teclado | Manual | Navegar por todo el sitio usando solo Tab, Enter y Escape |
| Lectores de pantalla | Manual | Prueba con VoiceOver (Mac), NVDA (Windows) o TalkBack (Android) |
Las herramientas automatizadas detectan aproximadamente el 30-50% de los problemas de accesibilidad. Las pruebas manuales con un teclado y un lector de pantalla son necesarias para identificar problemas basados en la interacción que las herramientas automatizadas no pueden detectar.
Plugins de WordPress para Accesibilidad
- WP Accessibility: Agrega enlaces de salto, corrige problemas comunes de accesibilidad, agrega una barra de herramientas para preferencias del usuario
- One Click Accessibility: Agrega una barra de herramientas de accesibilidad en el frontend (tamaño de fuente, contraste, resaltado de enlaces)
- Plantillas iniciales con accesibilidad: Astra y GeneratePress tienen bases sólidas de accesibilidad en sus temas base
Nota: Los plugins de superposición de accesibilidad (que agregan un widget flotante con botones de "corrección") son ampliamente criticados por la comunidad de accesibilidad. No hacen que un sitio web sea accesible; añaden una capa superficial que puede interferir con la tecnología de asistencia. Enfócate en construir accesibilidad en tu tema y contenido en lugar de depender de superposiciones.
Para más detalles, consulte la documentación oficial: Directrices WCAG, Equipo de Accesibilidad de WordPress.
Preguntas Frecuentes
¿Es WordPress accesible desde el principio?
El núcleo de WordPress ha mejorado significativamente en accesibilidad. El panel de administración es en gran medida navegable por teclado, y el editor de bloques incluye etiquetas ARIA. Sin embargo, la accesibilidad de tu sitio depende en gran medida del tema y los plugins que utilices. Un tema con una estructura HTML deficiente socavará las características de accesibilidad integradas de WordPress.
¿Necesito legalmente un sitio web accesible?
En muchas jurisdicciones, sí. La ADA (EE. UU.), la Ley de Accesibilidad Europea (UE, vigente desde junio de 2025), AODA (Canadá) y leyes similares requieren que los sitios web sean accesibles. Los requisitos específicos dependen de tu ubicación, tipo de negocio y audiencia. Consulta a un profesional legal para obtener requisitos específicos para tu situación.
¿La accesibilidad afecta al SEO?
Sí, hay una superposición significativa. Una estructura de encabezados adecuada, texto alternativo descriptivo, HTML semántico, carga rápida de páginas y compatibilidad con dispositivos móviles benefician tanto la accesibilidad como el SEO. Los sitios que siguen las pautas WCAG tienden a clasificarse mejor porque ofrecen una experiencia de usuario fundamentalmente mejor. Para mejores prácticas de SEO, consulta nuestra lista de verificación.
¿Pueden los creadores de páginas crear sitios web accesibles?
Elementor y otros creadores de páginas pueden crear contenido accesible si se utilizan correctamente. La clave es asegurar una jerarquía de encabezados adecuada, agregar texto alternativo a las imágenes, utilizar widgets semánticos (botones en lugar de divs estilizados) y probar la navegación por teclado. El creador en sí no determina la accesibilidad; cómo lo uses sí lo hace.
¿Cuál es el error de accesibilidad más común en los sitios de WordPress?
La falta de texto alternativo o su inadecuación en las imágenes es la violación WCAG más reportada. El segundo error más común es el contraste de color insuficiente. Ambos son fáciles de solucionar; requieren atención y práctica constante en lugar de experiencia técnica.
¿Cómo hago que WooCommerce sea accesible?
Las plantillas predeterminadas de WooCommerce tienen una accesibilidad razonable. Áreas clave para verificar: texto alternativo de la imagen del producto, etiquetas de formulario en los campos de pago, navegabilidad por teclado del carrito y el proceso de pago, y mensajes de error accesibles para fallos de validación de formularios. Usar un tema accesible como base reduce significativamente el trabajo específico de WooCommerce necesario.
Crea Sitios de WordPress Accesibles
Comienza con una base de tema accesible. Navega por temas ligeros y bien codificados que priorizan HTML semántico y cumplimiento de WCAG.
Explora Temas Accesibles →
