Por Nicho Agencia Digital · Publicado el
Define primero las combinaciones reales
Construye una matriz del catálogo con opción, identificador, precio y estado de disponibilidad. Diferencia una combinación inexistente de una temporalmente agotada. Ambas pueden impedir una compra, pero la explicación y las alternativas que conviene mostrar son distintas.
Como revisión editorial, pregunta qué debería ver alguien que llega desde un enlace a una variante agotada. Evita sustituirla silenciosamente por otra talla disponible. Explica el estado y deja que la persona decida si quiere cambiar. Tampoco muestres “últimas unidades” sin una fuente que sostenga ese mensaje.
Elige controles que funcionen con teclado
Para una selección única, considera controles nativos antes de construir componentes personalizados. Cada grupo necesita un nombre, y cada opción una etiqueta que permita distinguirla. El color visual puede acompañar palabras como “Azul oscuro”; no debería ser la única forma de reconocer la opción.
El patrón de grupos de radio de W3C describe entrada y salida con Tab, selección con espacio y movimiento entre opciones con flechas. Si implementas ese patrón, comprueba también foco visible y estado seleccionado. No añadas roles ARIA esperando que creen automáticamente el comportamiento de teclado.
Sincroniza precio, imagen y disponibilidad
La documentación de accesibilidad de Shopify indica que los cambios dinámicos de precio y disponibilidad deben comunicarse también a lectores de pantalla. Al cambiar una variante, comprueba que todas las partes de la ficha describen la misma selección.
Presenta el precio aplicable con su moneda y distingue las condiciones que aún deben calcularse. Si hay una promoción, evita mantener un precio anterior que pertenece a otra capacidad. Si necesitas consultar datos nuevos, muestra un estado de actualización y no permitas confirmar una combinación que todavía no has validado.
Trata la falta de disponibilidad como un estado explicado
Decide cómo se informará una opción agotada sin depender únicamente de un tono gris. Si queda fuera del recorrido de teclado por estar deshabilitada, conserva una explicación accesible de su existencia y estado en el contexto del grupo. Prueba que la persona puede encontrar una alternativa sin comenzar desde cero.
La ficha y el carrito pueden consultar existencias en momentos diferentes. Como criterio de robustez, vuelve a validar al añadir y explica cualquier cambio. Un rechazo necesita conservar la selección y ofrecer una salida; no debería parecer que el botón dejó de funcionar.
Ejemplo: capacidad y acabado de una mochila
Una tienda hipotética ofrece una mochila de dos capacidades y tres acabados. La versión pequeña en verde está agotada; la grande en ese acabado tiene otro precio. Al elegir verde, el selector mantiene visible la capacidad actual y explica su disponibilidad, en lugar de saltar automáticamente al producto más caro.
Cuando la persona cambia a la capacidad grande, la ficha actualiza precio, imagen y resumen de selección. Antes de añadir, puede leer “Grande, verde” junto al importe vigente. Si el inventario cambió durante la visita, recibe una explicación concreta y permanece en la ficha para elegir otra combinación.
Prueba tareas, no solo componentes aislados
Recorre el flujo con teclado, lector de pantalla y móvil: escoger una variante, descubrir una agotada, cambiar de opción y revisar el carrito. Incluye nombres largos y precios distintos. Las herramientas automáticas ayudan a encontrar algunos problemas, pero no comprueban por sí solas que inventario, mensajes y decisión de compra sean coherentes. Este recorrido es una revisión práctica, no una certificación completa de accesibilidad.
Si la disponibilidad difiere entre sistemas, revisa cómo conciliar el inventario de la tienda con la operación.
El siguiente paso
Revisemos cómo se eligen tus variantes y qué ocurre cuando cambian el precio o la disponibilidad antes de llegar al carrito.
Desarrollo web y plataformas empresariales · Conversar sobre tu proyecto ↗
Fuentes y alcance
Fuentes consultadas el 12 de octubre de 2026. Las recomendaciones de proceso son propuestas editoriales de Nicho; los ejemplos identificados como hipotéticos no representan resultados de clientes.
Contenido preparado con asistencia de IA y comprobaciones automáticas. No sustituye una evaluación de tu implementación ni garantiza resultados. Escríbenos si encuentras algo que debamos corregir.