Accessible Product Bundles and Gift Sets
Bundles ask shoppers to compare contents, swap items, and track a moving total. How to build bundle pages that stay usable for everyone.
A bundle page is a small application disguised as a product page. Contents to compare, items to swap or remove, quantities, a running total, and savings claims, all updating as the shopper builds. Each dynamic piece is a place where keyboard and screen reader shoppers get left behind.
Bundles convert well when they are understood. This guide covers the structure that keeps a bundle understandable: contents as text, changes announced, and totals that never move silently.
List contents as structured text
Every item in the bundle should appear as text with its name, size or variant, and individual price where shown. Contents presented only inside a lifestyle photo or a graphic strip cannot be compared, searched, or read aloud, and comparison is the whole point of a bundle.
Savings claims need the same clarity: the combined separate price, the bundle price, and the difference, in numbers. A badge saying save more with no figures is marketing. The figures are the information, and they belong in text.
Announce every change to the bundle
Swapping an item, removing one, or changing a quantity changes contents and price at once. Those changes must be announced to assistive technology and visible in a summary that updates in place, not discovered at checkout.
A persistent summary region, contents count and total, that updates as choices change gives every shopper the same running picture. Without it, screen reader users build bundles blind and meet the total for the first time at payment.
Keep swap and remove controls simple
Each item needs its own clearly labelled controls: swap this item, remove this item, with the item named in the label. Rows of identical buttons labelled only change or remove force screen reader users to guess which product they are acting on.
Confirmation for destructive actions should be proportionate. Removing an item with no undo and no announcement is a data loss pattern. An announced removal with an undo route serves everyone better, not only assistive technology users.
Test the bundle as a journey
Build a complete bundle by keyboard alone: swap an item, change a quantity, remove and restore one, read the total, and add it to the basket. Then repeat with a screen reader and listen for whether contents and total stayed clear at every step.
Retest after promotional bundle launches. Seasonal gift sets are built fast from copied templates, and each copy is a chance for labels and announcements to be lost.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Accessible Star Ratings and Review Widgets, Making Gift Wrap and Gift Message Options Accessible, and Making Sale and Clearance Pages Accessible Under Time Pressure.
Frequently asked questions
What is the biggest bundle page barrier?
Silent change. Items swap and totals move with no announcement, so assistive technology users cannot follow the bundle they are building. A live summary of contents and total fixes the core problem.
How should bundle contents be presented?
As structured text listing each item, its variant, and its price where prices are shown individually. A contents photo can accompany the list but cannot replace it.
Why do swap buttons need item names in their labels?
Because identical labels like change or remove give a screen reader user no way to know which product the button acts on. Naming the item in the label makes every control self describing.
Should bundle savings be shown in figures?
Yes. The separate total, the bundle price, and the difference should all appear as numbers in text. A savings badge without figures cannot be verified by any shopper.