Práctica diaria

Accesibilidad en la tienda online: revisa el proceso de compra

Prueba el producto, el carrito y el pago como un recorrido continuo. Una lista de verificación para responsables de tiendas online y agencias.

5 min de lecturaActualizado: Redacción de Accessonaut Publicado el

En resumen

En una tienda online, revisa todo el recorrido de compra: encontrar el producto, elegir la variante, modificar el carrito, introducir los datos y pagar. Un análisis de la página de inicio no puede mostrar si este proceso funciona para personas con distintas necesidades de acceso.

¿Tiene que ser accesible mi tienda online?

En Alemania, desde el 28 de junio de 2025 la BFSG incluye determinados servicios para consumidores, entre ellos el comercio electrónico. Una tienda online en la que los consumidores celebran contratos es el ejemplo típico.

Existe una excepción para los servicios de microempresas con menos de diez personas empleadas y un volumen de negocio anual o un balance general anual de no más de dos millones de euros. Las tiendas que de verdad se dirigen solo a empresas deben valorarse por separado. Los detalles se explican en el artículo sobre la obligación BFSG. Aunque no haya obligación, el esfuerzo merece la pena: un recorrido de compra que funciona con teclado, ampliación y lector de pantalla suele ser también más claro para todo el mundo. Clasifica tu oferta concreta según la ley y deja que una persona especializada aclare las cuestiones jurídicas pendientes; este artículo no es asesoramiento jurídico.

¿Qué requisitos se aplican a las tiendas online?

El reglamento de la BFSG (BFSGV) exige en su § 12 que las webs y las apps sean perceptibles, operables, comprensibles y robustas. El § 19 de la BFSGV añade para el comercio electrónico que las funciones de identificación, autenticación, seguridad y pago también deben ser accesibles.

Además, debes facilitar información sobre la accesibilidad de los productos que vendes, en la medida en que el operador económico responsable, por ejemplo el fabricante, la ponga a disposición. Si el servicio cumple normas armonizadas publicadas en el Diario Oficial de la UE, según el § 4 de la BFSG se presume que cumple los requisitos que estas cubren. Como base práctica de trabajo para los equipos de tiendas online, sirve WCAG 2.2 en el nivel AA.

¿Cómo revisas el recorrido de compra paso a paso?

Usa un producto con variantes, una dirección de envío típica y un método de pago real disponible en un entorno de pruebas adecuado. Revisa tanto la compra como invitado como el inicio de sesión, si tu tienda ofrece ambas opciones.

Repite el recorrido con el teclado, con una ampliación del 200 %, en un smartphone y con un lector de pantalla. Anota para cada etapa si la tarea se completa, si solo se completa dando un rodeo o si fracasa.

  • Búsqueda de productos y filtros: facilidad de uso, denominaciones comprensibles y cambios perceptibles en la lista de resultados.
  • Página de producto: descripciones de imagen significativas, variantes accesibles y disponibilidad.
  • Carrito: cambiar cantidades, eliminar productos y entender los importes.
  • Proceso de compra: etiquetas de los campos, corrección de errores y datos obligatorios comprensibles.
  • Pago y confirmación: redirecciones externas, vuelta a la tienda y finalización reconocible.

¿Dónde fallan con más frecuencia los recorridos de compra?

  1. Selección de color o talla como pequeños recuadros sin nombre textual: con lector de pantalla solo se oye «botón».
  2. Filtros que cambian la lista de resultados sin anunciar el nuevo número, por ejemplo «24 productos encontrados».
  3. Botones de más y menos para la cantidad sin etiqueta.
  4. Un carrito que se actualiza sin que los lectores de pantalla anuncien el cambio.
  5. Un banner de cookies o una cabecera fija que tapa el elemento con el foco (WCAG 2.4.11).
  6. Objetivos de clic demasiado pequeños en el smartphone, por debajo de 24 × 24 píxeles CSS y sin separación suficiente (WCAG 2.5.8).
  7. Mensajes de error en el proceso de compra que solo se reconocen por un borde rojo.
  8. Un CAPTCHA en el registro o en el pedido sin alternativa accesible.
  9. Indicaciones sobre gastos de envío o plazo de entrega que solo aparecen al pasar el ratón por encima.
  10. Un tiempo de reserva en el carrito que caduca sin que se pueda ampliar.

¿Qué debe incluir una página de producto accesible?

Las fotos de producto necesitan textos alternativos que muestren las características relevantes, por ejemplo el color, el material o un cierre especial. El precio, el precio por unidad de medida, el plazo de entrega y la disponibilidad aparecen como texto real en la página, no solo en un gráfico.

Las tablas de tallas van en una tabla HTML real con celdas de encabezado. Los vídeos de producto necesitan subtítulos. Si el fabricante facilita datos sobre la accesibilidad de un producto, por ejemplo de un lector de libros electrónicos, deben figurar en la descripción. Las variantes deberían implementarse como campos de selección con nombre, para que se anuncie «Color: azul oscuro, seleccionado». Avisos como «Solo quedan 2 unidades» o un descuento no deberían reconocerse solo por el color o un símbolo.

¿Cómo gestionas los proveedores de pago y los plugins?

Los diálogos de pago, los widgets de valoraciones y los banners de consentimiento forman parte del recorrido real del usuario. La BFSG excluye los contenidos de terceros que no financias, no desarrollas ni controlas. No confíes sin comprobarlo en esta excepción para los componentes que integras a propósito en tu recorrido de compra.

Prueba también los componentes externos y documenta los problemas. Pide al proveedor información sobre la accesibilidad y, si hace falta, compara alternativas. Presta especial atención a las redirecciones al banco o al servicio de pago: ¿el foco queda en un lugar lógico al volver y se reconoce la confirmación del pedido? Si es posible, ofrece varios métodos de pago. Así, si uno falla, sigue habiendo otro camino para completar la compra. Un widget adicional no puede reparar de forma general un proceso de compra inaccesible.

¿Qué información sobre accesibilidad tienes que facilitar?

Según el § 14 y el anexo 3 de la BFSG, describes el servicio, explicas su funcionamiento, expones cómo cumple los requisitos e indicas la autoridad de vigilancia del mercado competente. La Bundesfachstelle Barrierefreiheit (centro federal de accesibilidad) recomienda que los datos se puedan encontrar fácilmente, por ejemplo mediante un enlace «Accesibilidad» en la cabecera o en el pie de página. La propia información debe ser accesible. Describe de forma concreta lo que has implementado, por ejemplo el manejo con teclado, los contrastes, los formularios y los métodos de pago, en lugar de limitarte a nombrar un estándar.

Mantén los datos actualizados cuando cambies el proceso de compra, el tema o los métodos de pago. El § 14, apartado 3, de la BFSG exige tener debidamente en cuenta los cambios en la prestación del servicio.

¿Qué puede aportar un análisis automático en la tienda?

El análisis BFSG de Accessonaut revisa automáticamente una página de acceso público y muestra los hallazgos por importancia. Después de la página de inicio, revisa también la página de producto, la página de categoría y los formularios. Los pasos posteriores al carrito y al pago los pruebas manualmente. Repite el análisis tras las actualizaciones del tema y de los plugins, porque pueden cambiar las plantillas. Un buen resultado no demuestra la conformidad con la BFSG.

Fuentes y estado de revisión

Aquí encontrarás las fuentes originales de este artículo. Última revisión: .

Los requisitos legales dependen del país, del proveedor y de la oferta concreta. Este artículo explica los fundamentos y los pasos de trabajo. Los resultados de las pruebas se refieren al alcance y la fecha documentados.

Más sobre Práctica diaria

Tu siguiente paso

¿Qué necesita tu web?

Analiza una página pública en busca de barreras detectables automáticamente. Los resultados muestran hallazgos concretos y te ayudan a priorizar.

Análisis web gratuito

Un proceso de revisión sensato

  • Encontrar problemas detectables automáticamente
  • Probar manualmente el teclado y los recorridos reales
  • Corregir, volver a analizar y documentar
Guía para probar tu web