Accesibilidad en Webflow: los errores comunes y dónde se corrigen
Todos los sitios Webflow que escaneamos comparten el mismo puñado de fallos. Aquí va cada uno: qué es, a quién deja fuera y dónde se corrige en Webflow. Donde dice "tema", es código, y el HTML corregido es lo que necesita tu desarrollador.
1. Imágenes sin descripción
Se arregla en el editor, sin códigoEl lector de pantalla de una persona ciega dice "imagen" y nada más. Si la imagen es un producto, una promo o un botón, esa persona no sabe qué es.
personas ciegas (lector de pantalla)
Dónde en Webflow
Designer → selecciona la imagen → Ajustes → Texto alternativo (o panel Assets → imagen → Alt).2. Texto difícil de leer
Se arregla en el editor, sin códigoHay textos demasiado claros sobre su fondo. Personas con baja visión, clientes mayores y cualquiera con el celular al sol no los pueden leer. Es el hallazgo más común en demandas de accesibilidad.
personas con baja visión · quien entra desde el celular
Dónde en Webflow
Designer → selecciona el texto → Estilo → Tipografía → Color. El panel de auditoría de Webflow también marca el contraste.3. Enlaces que no dicen a dónde llevan
Se arregla en el editor, sin códigoEnlaces tipo "clic aquí" o una imagen sin texto se leen como "enlace". Quien usa lector de pantalla navega saltando entre enlaces, así que estos son callejones sin salida.
personas ciegas (lector de pantalla)
Dónde en Webflow
Designer → selecciona el enlace → cambia su texto; para íconos, Ajustes → Aria label.4. Campos de formulario sin etiqueta
Se arregla en el editor, sin códigoEn tus formularios (compra, contacto, registro) hay campos que no dicen qué va ahí. Un cliente ciego escucha "cuadro de texto" y no puede terminar la compra.
personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
Dónde en Webflow
Designer → selecciona el campo → Ajustes → Etiqueta; deja "mostrar etiqueta" activado.5. La página no declara su idioma
Se arregla en el editor, sin códigoEl lector de pantalla adivina el idioma y lee el español con voz en inglés (o al revés): no se entiende nada.
personas ciegas (lector de pantalla)
Dónde en Webflow
Ajustes del proyecto → General → Localización / Código de idioma.6. La página no tiene título
Se arregla en el editor, sin códigoLa pestaña del navegador sale vacía y el lector de pantalla no puede decir en qué página está. También perjudica en Google.
personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
Dónde en Webflow
Páginas → engranaje de la página → Ajustes SEO → Etiqueta de título.7. Títulos fuera de orden
Se arregla en el editor, sin códigoLos títulos saltan niveles (como un documento que pasa del capítulo 1 a la sección 1.1.1). El esquema de la página deja de tener sentido para el lector de pantalla.
personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
Dónde en Webflow
Designer → selecciona el título → Ajustes → Etiqueta de encabezado (H2, H3…).8. Botones demasiado pequeños para tocar
Necesita el tema (código)Algunos botones o enlaces son más pequeños que la yema de un dedo. Clientes mayores y personas con temblor no aciertan.
personas que no pueden usar el mouse · quien entra desde el celular
Dónde en Webflow
En Webflow esto se ajusta en el Designer. Abre el elemento y usa Ajustes (engranaje) o el panel de Estilo; el código de abajo muestra exactamente qué poner.9. Videos sin subtítulos
Necesita el tema (código)Los clientes sordos no reciben nada de tus videos.
personas sordas
Dónde en Webflow
En Webflow esto se ajusta en el Designer. Abre el elemento y usa Ajustes (engranaje) o el panel de Estilo; el código de abajo muestra exactamente qué poner.10. El zoom está bloqueado en el celular
Necesita el tema (código)Tu sitio prohíbe agrandar con los dedos. Quien necesita ver más grande no puede.
personas con baja visión · quien entra desde el celular
Dónde en Webflow
En Webflow esto se ajusta en el Designer. Abre el elemento y usa Ajustes (engranaje) o el panel de Estilo; el código de abajo muestra exactamente qué poner.11. Botones sin nombre
Necesita el tema (código)Los botones que son solo un ícono (menú, carrito, cerrar) se leen como "botón" y ya. Un cliente ciego no distingue el carrito del botón de cerrar.
personas ciegas (lector de pantalla) · personas que no pueden usar el mouse
Dónde en Webflow
En Webflow esto se ajusta en el Designer. Abre el elemento y usa Ajustes (engranaje) o el panel de Estilo; el código de abajo muestra exactamente qué poner.12. La página no tiene un título principal
Necesita el tema (código)Las personas ciegas navegan por títulos; sin uno principal la página no tiene punto de partida.
personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
Dónde en Webflow
En Webflow esto se ajusta en el Designer. Abre el elemento y usa Ajustes (engranaje) o el panel de Estilo; el código de abajo muestra exactamente qué poner.
Preguntas que hace la gente
- ¿Webflow es accesible de fábrica?
- La plataforma en sí sigue las pautas razonablemente bien; los fallos vienen del tema, de las apps o plugins y del contenido (fotos subidas sin descripción). Un escaneo de tu propio sitio te dice cuáles.
- ¿Necesito un desarrollador para arreglar la accesibilidad en Webflow?
- Para la mayoría no: texto alternativo, títulos de página, encabezados, texto de enlaces, colores y etiquetas de formulario son ajustes. Los menús que ignoran el teclado, las ventanas que atrapan el foco y los iconos-enlace sin nombre viven en el tema; para eso hace falta el código corregido.
- ¿Una app o widget de accesibilidad arregla Webflow?
- No. Un widget cambia lo que ve el visitante en el navegador; el tema y las fotos siguen como estaban, y las demandas citan el código.