WooCommerce
Accesibilidad en WooCommerce: dónde está el problema de verdad
WooCommerce tiene una ventaja rara en este sector: el propio proyecto publica su postura sobre accesibilidad y afirma que el frontal del plugin principal es «sustancialmente conforme» con WCAG 2.2 AA. Eso es más de lo que dice casi nadie. El problema es que una tienda WooCommerce no es solo el plugin: es un tema, entre diez y treinta plugins y una pasarela de pago. Ahí es donde se rompe.
El núcleo de WooCommerce no suele ser el problema. Lo son los avisos que no se anuncian, los selectores de variaciones sin etiqueta, los filtros por facetas de plugins que no funcionan con teclado, y los campos del checkout que señalan el error solo con color rojo. Casi todo se corrige con hooks y plantillas sobrescritas, sin tocar el núcleo.
Lo que pone WooCommerce y lo que pones tú
Lo que pone WooCommerce: el proyecto declara que el frontal del plugin principal es sustancialmente conforme con WCAG 2.2 nivel AA y reconoce carencias en el panel de administración. Es una declaración honesta y poco frecuente.
Lo que pones tú: el tema, y ahí la diferencia es enorme entre uno accessibility-ready y uno comprado en un mercado de plantillas. Los plugins de filtros, popups y reseñas. La pasarela de pago, que en muchos casos es un iframe de un tercero cuya accesibilidad no controlas. Y los contenidos: títulos de producto claros, textos alternativos, mensajes de error que digan qué corregir.
La consecuencia práctica: si tu tienda no cumple, el trabajo casi nunca está en el núcleo, sino en cuatro o cinco puntos concretos de tu instalación.
Las siete barreras que salen casi siempre
| Componente | Qué falla | WCAG | La corrección |
|---|---|---|---|
Avisos y erroreswoocommerce-message / error | Los mensajes de «producto añadido» o de error no se anuncian a quien usa lector de pantalla. | 4.1.3 | Envolverlos en una zona con role="alert" o aria-live mediante un filtro. |
Selector de variacionesvariable.php (variaciones) | Los desplegables de talla y color llegan sin etiqueta asociada. | 1.3.1 · 3.3.2 | Asociar cada select con su label for en la plantilla sobrescrita. |
Añadir al carrito con AJAXadd-to-cart AJAX | El carrito se actualiza en silencio: visualmente cambia, para un lector no pasa nada. | 4.1.3 | Marcar el contenedor que se actualiza con aria-live="polite". |
Filtros por facetasfiltros por facetas (plugin) | Los plugins de filtrado suelen construir casillas falsas que el teclado no alcanza. | 2.1.1 · 2.4.7 | Usar controles nativos o dar a los personalizados rol, estado y foco visible. |
Campos del checkoutform-checkout.php | Errores señalados solo con color y campos sin descripción asociada. | 3.3.1 · 3.3.2 | Texto de error explícito y aria-describedby en los campos con ayuda. |
Pasarela de pagopasarela de pago externa | El iframe del proveedor puede ser inaccesible y no lo controlas desde tu web. | 4.1.2 | Probar el pago real con teclado y, si falla, cambiar de proveedor o reclamarle. |
El tematema (Storefront u otro) | Contrastes bajos y foco invisible: lo más común en plantillas de mercado. | 1.4.3 · 2.4.7 | Elegir un tema accessibility-ready o corregir contraste y foco en el tema hijo. |
Las correcciones se aplican con hooks en el functions.php del tema hijo o sobrescribiendo plantillas en woocommerce/. Nunca editando el núcleo: se perdería en la siguiente actualización.
Por qué el plugin de accesibilidad no lo resuelve
En el repositorio de WordPress hay plugins de accesibilidad que prometen cumplimiento con una casilla. Añaden una barra de herramientas con contraste alto y tamaño de letra. No arreglan un aviso que no se anuncia, ni un filtro que no responde al teclado, ni un campo de checkout sin etiqueta.
Hay además un problema propio de WordPress: cada plugin añade su propio HTML al frontal, así que un plugin que «corrige la accesibilidad» a menudo entra en conflicto con lo que otro plugin acaba de generar. La vía que funciona es la aburrida: elegir bien el tema, revisar los plugins que pintan HTML y corregir con hooks.
Prueba tu tienda en diez minutos, sin herramientas
- Guarda el ratón. Desde la portada, llega a un producto variable, elige talla y color, añádelo al carrito y llega hasta el pago con Tab, Mayús+Tab, Intro y las flechas.
- Añade al carrito y escucha. Si usas añadir con AJAX, comprueba que el aviso de «producto añadido» está dentro de una zona con
aria-live. - Envía el checkout con un campo vacío a propósito. El error debe decir qué campo es y qué falta, no solo pintar el borde en rojo.
- Usa los filtros con el teclado. Es el punto donde fallan más plugins.
- Amplía al 200 % y comprueba que la tabla del carrito sigue siendo usable.
¿Quieres el listado completo de tu tienda?
El escaneo gratuito te da un primer mapa de las barreras de tu tienda en unos minutos: sin cuenta, sin tarjeta y sin compromiso.