Los 4 fallos de accesibilidad EAA/WCAG que tu tienda WooCommerce trae de serie

Revisamos la cabecera de 12 tiendas online pyme españolas (temas WordPress+WooCommerce, CMS propio y Shopify). Resultado: 5 de 5 tiendas WooCommerce tenían al menos un fallo WCAG 2.1 AA detectable con solo leer el HTML público de la portada. Ninguna de las 5 tiendas Shopify (tema Dawn u otro moderno) tenía ninguno de estos 4 fallos en la misma ventana de análisis.

El European Accessibility Act (Directiva 2019/882), transpuesto en España por la Ley 11/2023 y el RD 193/2023, exige a las tiendas online cumplir EN 301 549 (equivalente práctico a WCAG 2.1 AA). Estos son los 4 patrones exactos que encontramos, con el fragmento real de HTML y cómo se arregla.

1. Sin skip-link (criterio 2.4.1 — Bypass Blocks)

Visto en 4 de 5 tiendas WooCommerce de la muestra. El body arranca directo en el contenedor de plantilla, sin ningún enlace de "saltar al contenido" para quien navega con teclado o lector de pantalla.

Arreglo: añadir como primer elemento dentro de <body>:

<a class="skip-link" href="#content">Saltar al contenido</a>

y confirmar que el id="content" existe en el contenedor de contenido principal, no en la cabecera.

2. Skip-link roto: apunta al sitio equivocado

Una tienda de la muestra sí tenía skip-link, pero apuntaba a un id="content" que estaba en el contenedor de la cabecera, no en el contenido principal. El enlace existe pero no hace nada útil: sigue fallando el mismo criterio 2.4.1 aunque a simple vista parezca resuelto.

Arreglo: mover el id="content" (o el que use el tema) al elemento <main> real, y comprobarlo tabulando desde la barra de direcciones, no solo mirando el código.

3. Selector de categoría sin etiqueta (criterios 1.3.1 / 4.1.2)

Patrón real encontrado en el buscador de producto de una tienda:

<select name="product_cat" id="product_cat-216" class="postform">...</select>

Sin <label for="product_cat-216"> ni aria-label. Un lector de pantalla anuncia "combobox" sin decir para qué sirve.

Arreglo:

<label for="product_cat-216" class="screen-reader-text">Filtrar por categoría</label>
<select name="product_cat" id="product_cat-216" class="postform">...</select>

4. Enlace o botón de menú sin nombre accesible (criterios 2.4.4 / 4.1.2)

Patrón real, típico de menús off-canvas o de búsqueda con solo icono:

<a href="#jPanelMenu" class="off-canvas-overlay"><span class="icon-menu"></span></a>

Sin texto, sin aria-label: para un lector de pantalla es un enlace vacío. Mismo problema con botones que solo llevan un <span> con icono y sin title ni aria-label en el propio botón.

Arreglo:

<a href="#jPanelMenu" class="off-canvas-overlay" aria-label="Abrir menú"><span class="icon-menu"></span></a>

¿Y ahora qué?

Estos 4 son solo los detectables en la cabecera, con acceso público al HTML y sin ejecutar JavaScript. Un informe completo cubre también el pie de página, la ficha de producto, el checkout y el contraste de color — las zonas donde de verdad se pierde una venta o llega una reclamación.

El Informe de exposición legal EAA/WCAG audita tu tienda entera contra WCAG 2.1 AA y te entrega los fallos con archivo, línea y arreglo, igual que los de arriba pero para tu sitio.

$99 pago único

Comprar el informe — $99 →

Método

Muestra de 12 tiendas online pyme españolas (gourmet y cerámica artesanal), portada leída vía HTTP público, sin ejecutar JavaScript. Los recuentos son un suelo, no un total: la ventana de análisis cubre cabecera y navegación, no la rejilla de producto completa ni el pie de página. Fuente de los 4 patrones: muestra propia, septiembre 2026.