Accesibilidad en ecommerce: guía completa para tiendas online

Un ecommerce accesible permite descubrir productos, comparar opciones, añadir artículos al carrito, identificarse y pagar sin que la interfaz excluya a personas que utilizan teclado, lector de pantalla, zoom u otras formas de interacción. No basta con que la página de inicio pase un escáner: el recorrido completo de compra debe funcionar.

Ese matiz importa porque las barreras que más dañan al usuario y al negocio suelen aparecer lejos de la home. Un selector de talla que solo comunica el color, un modal que atrapa el foco o un error de tarjeta que no se anuncia pueden convertir una compra casi terminada en una venta imposible.

En esta guía recorremos una tienda online como lo haría un cliente: desde la búsqueda hasta la confirmación. Veremos qué exige la accesibilidad, cómo se relaciona con la Ley 11/2023 y qué debería revisar primero un equipo de ecommerce.

Accesibilidad ecommerce en 60 segundos

La Ley 11/2023 incluye los servicios de comercio electrónico dirigidos a consumidores dentro de su ámbito.
La accesibilidad debe cubrir el proceso completo: navegación, producto, carrito, identificación, seguridad y pago.
El nivel WCAG AA es la referencia técnica habitual, pero no equivale por sí solo a una conclusión legal.
Los componentes de terceros también pueden bloquear la compra.
Un test automático ayuda a encontrar patrones, pero debe completarse con pruebas manuales.
La tienda debe seguir siendo accesible después de cambiar plantillas, promociones o proveedores.

Primer diagnóstico Empieza por una URL crítica de tu tienda. Analiza una ficha de producto, el carrito o el acceso al checkout con Sprout Scan y localiza incidencias que puedan repetirse en toda la plantilla.

Analizar mi ecommerce con Sprout Scan →

Gratis | Sin registro | Resultado en aproximadamente 10 segundos

Qué es un ecommerce accesible

Un ecommerce es accesible cuando personas con distintas capacidades pueden completar las tareas esenciales con autonomía. Esto incluye informarse, elegir, corregir errores, aceptar condiciones y confirmar una compra.

La accesibilidad no implica eliminar funciones avanzadas ni construir una tienda paralela. Significa que la experiencia principal no depende de una única capacidad. Por ejemplo:

El producto no se distingue únicamente por el color.
Los controles funcionan con teclado y comunican su estado.
Las imágenes importantes tienen alternativas útiles.
Los campos conservan etiquetas visibles.
Los mensajes de error se anuncian y explican cómo continuar.
La autenticación no obliga a resolver una prueba cognitiva sin alternativa.

La referencia técnica más utilizada para evaluar estos requisitos son las Pautas de Accesibilidad para el Contenido Web, WCAG.

Qué exige la Ley 11/2023 a los servicios de comercio electrónico

El Título I de la Ley 11/2023 incluye expresamente los servicios de comercio electrónico que se prestan a consumidores. La norma los define como servicios prestados a distancia mediante sitios web o servicios móviles, por medios electrónicos y a petición individual de un consumidor, con el objetivo de celebrar un contrato.

Además de los requisitos generales, el Anexo I presta atención específica a:

Facilitar información sobre la accesibilidad de los productos y servicios en venta cuando el agente responsable la proporcione.
Garantizar la accesibilidad de las funciones de identificación, seguridad y pago cuando formen parte del servicio.
Ofrecer métodos de identificación, firma electrónica y pago que sean perceptibles, funcionales, comprensibles y resistentes.

La aplicación efectiva de buena parte de estas obligaciones comenzó el 28 de junio de 2025. La ley contempla una exención para microempresas que prestan servicios, pero eso no debe resumirse como “menos de diez empleados significa ninguna obligación”. La definición incluye también límites económicos y puede existir otra normativa aplicable.

Para analizar ámbito, exenciones y transiciones, consulta nuestra guía específica sobre la Ley 11/2023 y accesibilidad web.

Importante: una tienda no demuestra cumplimiento porque su home obtenga una buena puntuación. El servicio incluye páginas, estados y procesos conectados. La evaluación jurídica debe realizarse sobre el caso concreto.

La accesibilidad se decide en el recorrido completo de compra

Evaluar el ecommerce como una colección de URLs puede ocultar el problema real. La persona no visita páginas aisladas: intenta comprar.

Etapa	Tarea del usuario	Barrera frecuente
Descubrimiento	Buscar, navegar y filtrar.	Filtros sin nombre, foco perdido o resultados que cambian sin anunciarse.
Producto	Comprender características, precio y disponibilidad.	Información solo visual, variantes sin estado o galería imposible con teclado.
Decisión	Seleccionar talla, cantidad o configuración.	Opciones identificadas solo por color o controles táctiles demasiado pequeños.
Carrito	Revisar, modificar o eliminar artículos.	Actualizaciones silenciosas, botones ambiguos o totales que no se comunican.
Identificación	Entrar, crear cuenta o comprar como invitado.	CAPTCHA sin alternativa o autenticación que exige recordar o transcribir.
Checkout	Introducir dirección, entrega y facturación.	Etiquetas ausentes, formato no explicado o errores que borran datos.
Pago	Elegir método, autorizar y confirmar.	Iframe inaccesible, tiempo insuficiente o verificación que no funciona con apoyo.
Posventa	Consultar pedido, devolver o contactar.	Documentos inaccesibles o funciones disponibles solo en un canal.

El recorrido debe probarse con datos realistas y estados distintos: producto agotado, cupón no válido, dirección incompleta, tarjeta rechazada y sesión caducada. La accesibilidad se rompe con frecuencia en las excepciones.

Catálogo, búsqueda y filtros accesibles

En una tienda grande, encontrar el producto es parte del servicio. Una búsqueda accesible necesita un nombre claro, instrucciones cuando sean necesarias y resultados que se comuniquen cuando cambian dinámicamente.

Filtros que conservan contexto

Categoría, precio, talla y disponibilidad deben poder manejarse con teclado y anunciar sus estados. Si aplicar un filtro recarga la lista, el usuario necesita saber cuántos resultados quedan y dónde continúa su navegación.

Orden visual y orden de lectura

Una cuadrícula puede verse correcta y ofrecer un orden incoherente a un lector de pantalla o al teclado. La secuencia del código debe conservar una lectura lógica.

Enlaces que identifican el producto

Diez enlaces consecutivos llamados “ver más” obligan a adivinar. El nombre accesible debería comunicar qué producto se abrirá, sin convertir cada enlace en un párrafo.

Fichas de producto y variantes sin información escondida

Una ficha accesible permite comprender qué se vende, elegir una configuración y conocer el resultado de cada acción.

Galería

Las imágenes relevantes necesitan alternativas que aporten información útil. Los controles de anterior, siguiente y miniaturas deben tener nombres claros.

Precio

Precio anterior, descuento, impuestos y condiciones no deberían depender del tamaño, posición o tachado para entenderse.

Variantes

Talla, color y configuración necesitan nombre, estado seleccionado y disponibilidad comunicados también de forma programática.

Disponibilidad

Un cambio de stock o fecha de entrega debe anunciarse sin obligar a recorrer de nuevo toda la página.

Cuando el color sea importante, nómbralo. Cuando una imagen muestre una diferencia funcional, descríbela. Y cuando una selección cambie precio o disponibilidad, comunica el cambio a todas las personas, no solo visualmente.

Carrito y checkout: donde una barrera se convierte en abandono

El carrito concentra acciones dinámicas: cambiar cantidad, eliminar productos, aplicar cupones y recalcular totales. Cada cambio debe ser operable y su resultado debe percibirse.

En el checkout, conviene reducir decisiones innecesarias y conservar siempre el contexto. Una secuencia de cinco pasos puede ser accesible si el usuario conoce su progreso, puede volver atrás y no pierde datos. Un formulario de una sola página puede ser inaccesible si los errores aparecen lejos del campo o el foco salta sin explicación.

Identifica el paso actual y el número total de pasos.
Permite revisar y corregir antes de confirmar.
No reinicies campos válidos después de un error.
Explica formatos antes de que el usuario falle.
Mantén visibles el total, los gastos y las condiciones relevantes.
Evita límites de tiempo innecesarios o permite ampliarlos.

Formularios y mensajes de error que ayudan a continuar

El marcador dentro de un campo no sustituye a una etiqueta. Desaparece al escribir, puede tener poco contraste y no siempre comunica correctamente el propósito del control.

Un buen formulario:

Muestra etiquetas persistentes y asociadas programáticamente.
Indica qué campos son obligatorios antes de enviarlo.
Explica el formato esperado cuando no es evidente.
Agrupa controles relacionados, como dirección o método de entrega.
Identifica el error mediante texto, no solo con color.
Lleva el foco al resumen de errores o al lugar adecuado sin desorientar.
Permite revisar operaciones financieras antes de confirmarlas.

Mensaje poco útil: “Hay un error”. Mensaje útil: “El código postal debe tener cinco cifras; revisa el campo Código postal”. La segunda versión identifica el problema y ofrece una salida.

Identificación, seguridad y pago también forman parte de tu accesibilidad

Un ecommerce puede delegar pagos, autenticación o prevención del fraude, pero el usuario vive una sola experiencia. Si un proveedor introduce una barrera, la compra sigue bloqueada.

Antes de integrar un tercero, prueba:

Navegación completa con teclado.
Nombre y propósito de campos y botones.
Lectura de errores y avisos con tecnología de asistencia.
Contraste y foco dentro de ventanas o iframes.
Alternativas accesibles para CAPTCHA y verificación.
Autenticación que no dependa únicamente de una prueba cognitiva.
Gestión de tiempos y recuperación después de una sesión caducada.

Incluye estos requisitos en compras y contratos. “El proveedor es responsable” no devuelve la venta ni elimina la barrera para el cliente.

La accesibilidad móvil no consiste solo en que la tienda sea responsive

Una página puede adaptarse al ancho de pantalla y seguir siendo difícil de usar. En móvil importan el tamaño y separación de objetivos, el reflow, la orientación, los gestos y el comportamiento del teclado virtual.

Comprueba al menos que:

Los controles importantes pueden pulsarse sin precisión extrema.
Una acción que exige arrastrar tiene una alternativa sencilla.
El zoom no está bloqueado.
El teclado virtual no oculta el campo o el mensaje de error.
La orientación de pantalla no se restringe sin una necesidad esencial.
Los lectores de pantalla móviles anuncian nombres, estados y cambios.

Cómo evaluar la accesibilidad de un ecommerce

Un escaneo de muchas URLs permite detectar errores repetidos. La revisión manual permite saber si el usuario puede terminar la compra. Necesitas ambas capas.

Define la muestra. Incluye home, categoría, búsqueda, producto, carrito, checkout, cuenta, ayuda y posventa.
Escanea plantillas y estados. Busca patrones técnicos antes de revisar cada incidencia por separado.
Completa una compra con teclado. Observa foco, orden, modales, errores y cambios dinámicos.
Prueba zoom y móvil. Comprueba que el contenido se reorganiza y las acciones siguen disponibles.
Utiliza tecnologías de asistencia. Evalúa nombres, estados, mensajes y lectura del proceso.
Fuerza errores. Prueba cupón inválido, stock agotado, dirección incompleta y pago rechazado.
Documenta y verifica. Registra evidencia, responsable, corrección y resultado de la nueva prueba.

Nuestra guía para comprobar la accesibilidad de una web explica las pruebas manuales con más detalle.

Busca patrones Un problema en una plantilla puede estar afectando a cientos de productos. Escanea una URL representativa con Sprout Scan y utiliza el resultado para decidir qué componentes necesitan revisión prioritaria.

Escanear una ficha de producto →

El diagnóstico automático no sustituye la prueba del checkout completo.

Checklist priorizada de accesibilidad para ecommerce

Si tienes que decidir por dónde empezar esta semana, revisa estos doce puntos:

¿Puede recorrerse la compra completa utilizando solo el teclado?
¿El foco es visible y sigue un orden lógico?
¿Búsqueda, filtros y resultados comunican sus cambios?
¿Las variantes tienen nombre, disponibilidad y estado seleccionado?
¿Las imágenes informativas cuentan con alternativas útiles?
¿Precio, descuento y stock se entienden sin depender de color o posición?
¿Los botones explican su acción y producto asociado?
¿Los campos tienen etiquetas persistentes e instrucciones claras?
¿Los errores se identifican, se anuncian y permiten continuar?
¿Los cambios del carrito y los totales se comunican?
¿Autenticación, seguridad y pago funcionan con tecnologías de asistencia?
¿Existe una forma de detectar regresiones después de cada cambio?

Esta lista prioriza la experiencia de compra. Para revisar los criterios técnicos de forma exhaustiva, utiliza la checklist WCAG 2.2 AA.

Plan de mejora: de una auditoría puntual a una tienda que se mantiene accesible

Empieza por los bloqueos del checkout, pero no termines ahí. Si el error procede de un componente o proveedor, corrige el origen y añade una prueba que impida su regreso.

Semana 1: inventario de plantillas, recorridos y terceros.
Semana 2: línea de base automática y revisión manual del proceso de compra.
Semanas 3 y 4: corrección de bloqueos, formularios y componentes compartidos.
Mes 2: requisitos de accesibilidad en diseño, desarrollo, contenido y proveedores.
Desde el mes 3: monitorización de plantillas y revisión periódica de recorridos críticos.

La propia Ley 11/2023 exige a los prestadores incluidos disponer de procedimientos que garanticen que el servicio siga siendo conforme. En ecommerce tiene sentido operativo: catálogo, campañas, métodos de pago y componentes cambian constantemente.

Preguntas frecuentes sobre accesibilidad ecommerce

¿Los ecommerce están obligados a ser accesibles?

La Ley 11/2023 incluye los servicios de comercio electrónico prestados a consumidores dentro de su ámbito. Existen matices, exenciones y posibles normas adicionales, por lo que cada empresa debe revisar su caso concreto.

¿Desde cuándo se aplican los requisitos de la Ley 11/2023?

Buena parte de los requisitos de accesibilidad se aplican desde el 28 de junio de 2025, aunque la ley incluye reglas transitorias y exclusiones específicas.

¿Qué partes de una tienda online deben ser accesibles?

Debe analizarse el servicio completo: navegación, búsqueda, producto, carrito, identificación, checkout, seguridad, pago y funciones de posventa relevantes.

¿Una puntuación alta en Lighthouse demuestra que el ecommerce cumple?

No. Una puntuación automática resume las reglas comprobadas por la herramienta. No evalúa por sí sola todos los criterios ni el recorrido completo de compra.

¿Qué nivel WCAG debería utilizar un ecommerce?

WCAG nivel AA es la referencia técnica más habitual y W3C recomienda trabajar con WCAG 2.2 como objetivo actualizado. La referencia jurídica o contractual aplicable puede requerir un análisis adicional.

¿Quién responde si la pasarela de pago es inaccesible?

La pasarela puede pertenecer a un proveedor, pero forma parte de la experiencia del servicio. Conviene establecer requisitos contractuales, probar la integración y disponer de una alternativa cuando aparezca una barrera.

No por sí solo. No corrige automáticamente la semántica, el teclado, los formularios, los estados dinámicos o el comportamiento de terceros. Las barreras deben solucionarse en el sistema.

¿Hay que auditar todos los productos uno por uno?

No siempre. Puede seleccionarse una muestra representativa de plantillas, componentes, contenidos y recorridos, mientras la automatización amplía la cobertura y detecta patrones a escala.

Siguiente paso Comprueba la tienda donde el cliente toma decisiones. Empieza por una ficha, el carrito o el checkout. Detecta incidencias automatizables y completa después el recorrido con pruebas humanas.

Comprobar mi tienda online →

Gratis | Sin registro | Resultado en aproximadamente 10 segundos

Una tienda accesible no solo abre la puerta: permite llegar hasta el final

La accesibilidad de un ecommerce no se decide en una declaración ni en una puntuación. Se decide cuando una persona puede encontrar el producto, entenderlo, elegirlo, corregir un error y pagar.

Prioriza el recorrido, corrige los componentes que multiplican barreras y controla cada cambio importante. Así la accesibilidad deja de ser una revisión de última hora y pasa a formar parte de cómo la tienda vende y evoluciona.

Fuentes oficiales

Este contenido es informativo y no sustituye una evaluación técnica completa ni asesoramiento jurídico sobre la actividad de una empresa.