Accesibilidad en Webflow
Haz tu sitio Webflow realmente accesible: EAA y WCAG, sin overlay
Webflow te da control hasta el píxel, pero ninguna accesibilidad incorporada: el Designer deja por defecto los aria-* fuera de los componentes complejos. Nosotros encontramos las barreras y te entregamos la corrección en tus propios Custom Attributes, sin un widget que ralentice tu sitio.
Así aborda Seviranta tu sitio Webflow desde la raíz
Dónde se esconden los obstáculos
Los temas, las extensiones y los formularios introducen barreras silenciosas. Nosotros las encontramos todas.
La corrección en la fuente, no por encima
Reparaciones concretas en su configuración Webflow, no una capa de overlay que solo oculta los errores.
Sin widget, sin ralentización
Rastreamos desde fuera, desde servidores de la UE, con un 0 % de impacto en su velocidad de carga y sus Core Web Vitals.
Listo para la EAA
Evaluamos tu sitio según WCAG, al nivel en el que evalúan los reguladores.
Escaneo headless con axe-core, el mismo motor que incorpora Google Lighthouse, desde nuestros servidores en la UE. 0% de impacto en tu velocidad de carga.
La verdad: Webflow no es accesible por defecto
El Webflow Designer genera HTML limpio, y los componentes propios de Webflow (Tabs, Dropdown, Navbar, Slider) son, según el propio Webflow, accesibles mediante ARIA y por teclado. Los problemas surgen en lo que construyes tú mismo: las pestañas, los modales y los botones hechos con divs e interacciones no reciben rol ni estado, el estilo de foco tienes que definirlo tú en todas partes, el Audit panel solo comprueba cuatro cosas y el Lightbox no admite texto alt. Justo ahí es donde caen los hallazgos.
Lo que realmente está en juego
- Un checkout no accesible es una infracción directa de la EAA.
- Un widget de accesibilidad no cuenta como solución estructural.
- Los organismos de control prueban el HTML generado, incluidas tus apps.
- «Usamos Webflow» no es una defensa legal: la responsabilidad recae en la tienda online que está en vivo, no en la plataforma.
Lo que puede costar esperar
hasta € 1.000.000
Máximo UE · España/Luxemburgo
$ 4.000
EE. UU. · California (Unruh), por visita
No te multan de la noche a la mañana, primero llega un requerimiento de subsanación con plazo. Pero quien entonces puede mostrar un expediente fechado sale más barato.
Mira qué aplica a tu mercado →El riesgo oculto de las extensiones de Webflow de terceros
Los widgets de reseñas, los filtros, los bundlers y las apps de búsqueda inyectan HTML dinámico en tu frontend, y cada actualización de una app puede añadir una nueva barrera. En una auditoría ese código cuenta por completo, aunque no lo hayas escrito tú. Por eso Seviranta vigila de forma continua el resultado final tal como lo ve un organismo supervisor: tu tema Webflow más todas las apps y el contenido dinámico.
Lo que suele fallar en Webflow
- Tabs personalizadas sin role ni aria-selectedCuando construyes tus propias tabs en el Designer, siguen siendo simples div. Sin role="tab", aria-selected y aria-controls en los botones de las tabs, un lector de pantalla no puede saber que son tabs ni cuál está activa. Los añades a mano mediante los Custom Attributes.
- Dropdowns y modales sin gestión del atrapado del tecladoLas interacciones de Webflow a menudo abren un dropdown o un modal sin mover ni retener el foco. Quienes usan teclado tabulan por detrás del overlay y pierden el rastro del contenido.
- Botones div sin role ni tabindexUn div con una interacción de clic parece un botón, pero no lo es. Sin role="button" ni tabindex="0" mediante los Custom Attributes, resulta inalcanzable para quienes usan teclado o lector de pantalla.
- Imágenes de Lightbox sin texto altEl Lightbox de Webflow no admite texto alt para las imágenes que contiene, y el Audit panel no lo señala. Cada foto de producto o imagen de portafolio en un lightbox es, por tanto, invisible para los lectores de pantalla. Usa otra configuración de galería o describe la imagen en el texto que la rodea.
Así es una corrección de verdad
Fíjate en un componente de tabs personalizado que hayas construido con div en el Designer. Un lector de pantalla solo oye entonces «grupo» en lugar de una fila de tabs. La corrección está por completo en los Custom Attributes, sin reconstruir nada: pon role="tab", aria-selected y aria-controls en los botones de las tabs.
<div class="tab-link">Overzicht</div><div class="tab-link"
role="tab"
aria-selected="true"
aria-controls="panel-overzicht">Overzicht</div>Dónde lo resuelves dentro de Webflow
Webflow trae más de serie que la mayoría de herramientas no-code, pero sus herramientas cubren solo una parte de WCAG. Estos son los cinco lugares donde marcas la diferencia en el Designer, y lo que tienes que resolver fuera de él.
- 1Audit panel: cuatro comprobaciones, nada másEl Audit panel (barra de herramientas izquierda, Option/Alt + U) comprueba exactamente cuatro cosas: texto alternativo ausente, textos de enlace no descriptivos, niveles de encabezado saltados e ID de elemento duplicados. El contraste de color, todo lo que hay dentro de Components, los medios en Lightbox y las imágenes vinculadas al CMS quedan fuera. El verde del Audit panel no es verde WCAG.
- 2Texto alternativo: descriptivo o decorativoDefine el alt por defecto de cada asset en el Assets panel (engranaje → Descriptive o Decorative) y sobrescríbelo por instancia en Image settings → Alt text. Decorative genera un alt vacío para que los lectores de pantalla omitan la imagen. El texto alternativo dentro de un Lightbox no está soportado; elige ahí otra configuración de galería.
- 3Hacer visible el focoLos componentes propios de Webflow son, según Webflow, accesibles con ARIA y teclado, pero el estilo de foco lo tienes que definir tú. Style panel → States → 'Focused (keyboard)' y dale un outline claro; para los puntos del slider solo es posible mediante CSS personalizado en .w-slider-dot:focus.
- 4Custom attributes para todo lo que construyes túSi construyes pestañas, modales o botones con divs e interacciones, un lector de pantalla no tiene ni idea de qué son. Element settings → Custom attributes → '+' y añade role, aria-label, aria-expanded o tabindex. También puedes vincular atributos a campos del CMS y a propiedades de componentes, para configurarlos una sola vez.
- 5Skip link y movimientoUn enlace 'saltar al contenido' no viene integrado en Webflow; lo construyes tú como primer elemento del header, oculto hasta recibir el foco, con un pequeño script en Project settings → Custom code. Animaciones: pon las interacciones en 'no animation' o 'skip to end' para prefers-reduced-motion y da a los vídeos de fondo un botón de reproducir/pausar.
Lo dice el propio Webflow: los elementos probados cumplen 'hasta' WCAG 2.1 AA, y la herramienta hace fácil publicar contenido inaccesible. Nuestro escaneo comprueba la página publicada, exactamente lo que ve un regulador, independientemente de lo que el Audit panel marque en verde.
Lo que recibes
Por cada error: qué, por qué y cómo
Para cada hallazgo ves qué está mal, a quién afecta, qué regla WCAG implica y una solución concreta y pensada para Webflow, con un ejemplo de código siempre que sea posible.
Detección específica de la plataforma
Detectas los errores que surgen precisamente en Webflow, no solo lo que capta una comprobación genérica de WCAG.
Un expediente que aguanta
Un resumen fechado de tus escaneos y hallazgos que puedes mostrar en una auditoría o una inspección.
Con una herramienta de informes pagas la licencia y también a tus desarrolladores para resolver los errores. Con Seviranta la corrección va incluida: sin doble factura.
Protege tu conversión y tu situación legal
Una app que pega un icono de accesibilidad sobre tu sitio de Webflow es un riesgo para tu negocio. Los hechos, uno a uno:
Widgets de accesibilidad para Webflow
- Cargan scripts externos adicionales que perjudican tu velocidad de carga (LCP) y, con ello, tu conversión.
- Enmascaran el error en lugar de resolverlo: el código de fondo sigue estando mal.
- No te protegen frente a reclamaciones. La FTC multó al proveedor de overlays accessiBe en 2025 con 1 millón de dólares por afirmaciones engañosas sobre cumplimiento.
El enfoque de Seviranta
- 0 % de impacto en tu velocidad de carga: escaneamos de forma externa desde nuestros servidores en la UE.
- Reparamos el código fuente real de tus plantillas de Webflow.
- Construimos automáticamente tu expediente EAA conservable, listo para mostrar a un regulador.
Preguntas y respuestas
- Webflow ya es accesible, ¿por qué falla entonces mi sitio?
- Los componentes propios de Webflow son accesibles con ARIA y teclado según Webflow, pero todo lo que construyes tú con divs e interacciones, tus elecciones de color, tus textos alternativos y tu orden de encabezados dependen de ti. Ahí están la mayoría de los hallazgos, y el Audit panel en gran parte no los ve.
- También vendo a Francia o Alemania. ¿Qué norma se aplica allí a mi sitio Webflow?
- La misma: WCAG 2.1 AA a través de la EN 301 549. Francia evalúa con el RGAA (versión 4.1.2, 106 criterios que cubren los criterios A y AA de WCAG 2.1), Alemania con la BFSG. Ambos evalúan la página publicada, no la herramienta de construcción. Hacerlo bien una vez en Webflow vale para todos los mercados.
- ¿Puede Seviranta aplicar la corrección en Webflow por mí?
- Por cada hallazgo entregamos la ubicación exacta (selector) y la corrección: qué custom attribute, qué texto alternativo, qué estilo de foco. Aplicarla lo haces tú o tu constructor de Webflow en el Designer. No necesitamos acceso a tu proyecto y no colocamos ningún script en tu sitio.
- ¿Es suficiente un widget de accesibilidad de Webflow para la EAA?
- No. Un widget pone una capa sobre tu sitio, pero no repara el código de fondo y no cuenta como cumplimiento estructural.
- ¿Mi checkout de Webflow está sujeto a la EAA?
- Sí. El checkout y la navegación forman parte explícita de la obligación bajo WCAG 2.1 AA.
- ¿Seviranta también escanea mis apps de Webflow?
- Sí. Probamos el HTML final generado, tema más apps, tal y como lo hace un organismo de control.
- ¿Esto ralentizará mi sitio de Webflow?
- No. Escaneamos de forma externa desde nuestros servidores en la UE; no se coloca ningún script en tu sitio. 0 % de impacto en tu velocidad de carga y tus Core Web Vitals.
Nosotros también lo hacemos
Nos exigimos exactamente el mismo listón: nuestra propia web obtiene 0 errores en axe-core, el mismo motor que incorpora Google Lighthouse y con el que también escaneamos tu tienda Webflow. Lo que una máquina detecta con certeza lo resolvemos de forma automática, el resto lo valora una persona. Así de riguroso te lo entregamos: consulta un informe de ejemplo real.
Lo que la EAA exige a tu tienda de Webflow
Desde junio de 2025 tu tienda online tiene que cumplir WCAG 2.1 AA, y una tienda de Webflow no es una excepción. El escaneo gratuito te muestra en 60 segundos en qué punto estás, con la línea exacta que no cumple.
¿Vendes en más de un país?
WCAG es el estándar mundial. Casi todos los mercados se apoyan en él:
Adapta tu tienda Webflow a WCAG una sola vez y cubres el listón técnico en todos esos mercados. Lo que cambia según el mercado es la autoridad que lo aplica y las multas.
Consulta qué se aplica en cada mercado de destino →¿Gestionas varios sitios de Webflow para clientes?
Evita que las tiendas online que entregas se conviertan en un riesgo legal bajo la EAA para tus clientes. Usa Seviranta como tu sello de calidad automatizado en cada entrega y cada deploy: un escaneo, y cada sitio está demostrablemente en orden.
Conoce nuestro programa de partners →Otras plataformas
Sigue leyendo
Escanea tu tienda de Webflow gratis
Pega la URL de tu Webflow en el escaneo gratuito y descubre en menos de un minuto qué líneas no cumplen, con el punto exacto en tus componentes.