SevirantaLos 10 errores de accesibilidad más frecuentes en tiendas online (y cómo resolverlos)
4 de junio de 2026
Respuesta corta. La mayoría de las tiendas online no fallan en cientos de cosas distintas, sino en el mismo puñado de errores: poco contraste de color, textos alternativos ausentes, botones y enlaces sin nombre, campos sin etiqueta, una estructura de encabezados desordenada y un manejo deficiente con el teclado. La buena noticia: justo por eso tiene solución — a menudo en todo el tema, de modo que una sola corrección cubre cientos de páginas a la vez.
El estudio WebAIM Million revela que ~96 % de las páginas de inicio tienen errores WCAG medibles, y se concentran en los diez de abajo. ¿Quieres saber cuáles tiene tu sitio? Más abajo escaneas gratis una página.
1. Poco contraste de color
Con diferencia, el error más frecuente. Texto gris claro sobre blanco, o un color de botón que queda demasiado apagado, resulta ilegible para personas con baja visión y bajo la luz intensa del sol en un móvil. La norma exige una relación de contraste de al menos 4,5:1 para texto normal (3:1 para texto grande).
Solución: oscurece o aclara el color del texto o del fondo hasta que la relación cuadre. En Shopify lo ajustas una sola vez en los ajustes de tu tema → colores, y se aplica de inmediato a toda tu tienda. Más sobre esto en contraste de color: el requisito WCAG y cómo medirlo.
2. Imágenes sin texto alternativo
Una foto de producto sin texto alternativo es invisible para un lector de pantalla — un cliente ciego no sabe entonces qué producto es. Esto afecta directamente a tus ventas.
Solución: dale a cada imagen informativa un texto alternativo breve que
describa lo que aparece. En Shopify: producto → archivos multimedia → "editar texto alternativo".
Las imágenes puramente decorativas reciben un alt vacío (alt=""). Consulta
cómo escribir textos alternativos que funcionan.
3. Botones sin nombre
Un botón que solo muestra un icono (carrito, búsqueda, menú) es leído por un lector de pantalla como "botón" — sin que la persona usuaria sepa qué hace.
Solución: dale texto al botón, o un aria-label que describa la acción,
por ejemplo aria-label="Añadir al carrito".
4. Enlaces sin texto claro
Igual que los botones: un enlace que solo consiste en un icono, o enlaces "leer más" sin contexto, no le dicen a quien usa un lector de pantalla adónde va a ir.
Solución: dale al enlace un texto visible y descriptivo, o un aria-label
("Ver carrito" en lugar de un icono de carrito pelado).
5. Campos de formulario sin etiqueta
Los campos de búsqueda, de acceso y de pago sin una etiqueta asociada son difíciles o imposibles de manejar con tecnología de asistencia. Justo en el pago, eso te cuesta clientes.
Solución: asocia una <label> visible a cada campo de entrada (mediante for/id),
o usa un aria-label si no hay espacio para texto visible.
6. Una estructura de encabezados desordenada
Quienes usan lector de pantalla navegan por los encabezados, como tú por un índice. Si saltas de un H1 a un H4, o usas los encabezados solo por el formato, esa estructura se rompe.
Solución: usa los encabezados en orden lógico (H1 → H2 → H3) y resuelve el formato con CSS, no con el nivel de encabezado.
7. Atributo de idioma ausente
Sin atributo de idioma, un lector de pantalla no sabe si tu página está en español o en inglés, y lo pronuncia todo con la pronunciación equivocada.
Solución: pon lang="es" (o el idioma correcto) en el elemento <html>. En
Shopify esto está en theme.liquid — normalmente ya presente, pero a veces vacío.
8. No manejable con el teclado
Mucha gente no usa ratón. Si un menú, un control deslizante o una ventana emergente solo funciona con el ratón, o si no puedes ver dónde está el foco, dejas fuera a esas personas.
Solución: asegúrate de que todo sea accesible con la tecla Tab, de que haya un borde de foco visible, y de que las ventanas emergentes no "atrapen" el foco.
9. Uso incorrecto de ARIA
Los atributos ARIA pueden ayudar a la tecnología de asistencia — pero mal usados o no válidos hacen justo daño. Esto se cuela a menudo a través de apps instaladas o de componentes del tema.
Solución: usa ARIA solo donde haga falta y con valores válidos. Si viene de una app o de un tema, comprueba ese componente.
10. Sin un título de página claro
Una página sin un <title> único no muestra en la pestaña del navegador ni en los lectores
de pantalla un nombre reconocible — navegar entre pestañas se vuelve adivinanza.
Solución: dale a cada página un título único y descriptivo. Shopify suele rellenarlo automáticamente; revisa tus plantillas personalizadas.
¿Cuál es el error de accesibilidad más frecuente?
El poco contraste de color es con diferencia el error más frecuente — encabeza con ventaja prácticamente todos los estudios a gran escala, porque se cuela sin que te des cuenta en los colores del tema, los textos de los botones y las etiquetas de precio. Es al mismo tiempo uno de los errores más fáciles de resolver: configuras bien una sola vez los colores de tu tema y se aplica a toda la tienda.
¿Se pueden resolver estos errores de una sola vez?
A menudo sí. Como una tienda online trabaja con plantillas, el mismo error aparece normalmente en cientos de páginas a la vez — y por tanto también se puede reparar en todo el tema. Un solo ajuste en tu tema (colores, encabezados, etiquetas) cubre entonces de golpe toda tu tienda.
¿Detecta un escaneo gratuito todos estos errores?
Un escaneo automatizado detecta de forma fiable cerca del 57 % de los problemas de manera automática; el resto requiere valoración humana. Ese 57 % incluye justamente los errores de arriba — contraste, textos alternativos, etiquetas, botones, encabezados — así que un escaneo saca a la luz de inmediato el grueso del asunto, con la corrección incluida.
¿Tienes curiosidad por cuáles de estos diez aparecen en tu sitio? Pega tu URL y escanea gratis una página en plena profundidad — sin cuenta, en menos de 60 segundos.