Cart Summary

A full shopping cart view that presents line items in an accessible table with quantity controls, removal actions, and a live-updating order summary.

Demo

Interact with the cart below. Try adjusting item quantities using the stepper controls, then remove an item using its remove button. Observe how the order summary totals update in real time and how a screen reader would be informed of those changes.

What to Observe

• Each line item row is clearly labeled, including the product name, quantity, and price, so the table is meaningful when read linearly.
• Quantity controls are associated with their product context so a screen reader user knows which item is being changed.
• Removing an item triggers a live-region announcement so users do not need to navigate back to notice the change.
• The order summary total updates dynamically and the updated value is communicated to assistive technology without a page reload.
• Keyboard focus is managed predictably — after removing an item, focus does not drop to the top of the page.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Cart table: Wraps all line items in a semantic table with appropriate column headers for product, quantity, unit price, and subtotal.
2. Line item row: A table row representing a single product, including its image, name, quantity stepper, and calculated subtotal.
3. Quantity stepper (inline): Decrement and increment buttons paired with a numeric display, scoped to the row's product context.
4. Remove button: A clearly labeled action that deletes the line item; its accessible name includes the product name to disambiguate it from other remove buttons.
5. Order summary panel: Displays subtotal, shipping estimate, taxes, and order total; updates live when quantities or items change.
6. Live region: A visually hidden element that announces cart changes — such as item removal or total updates — to screen readers.

Accessibility Behavior

• The cart uses a standard HTML table so column headers are associated with every data cell, allowing screen reader users to understand each value in context.
• Each quantity stepper has a label that references its product name, preventing confusion when multiple steppers exist on the same page.
• Each remove button carries a unique accessible name that includes the product name (e.g., "Remove Wool Cardigan from cart") rather than generic "Remove" text.
• Changes to the order total and item count are announced via a polite live region, so users are informed without an intrusive interruption.
• After a row is removed, keyboard focus moves to a logical target — either the next item's remove button or the cart heading — so users are not left without a focus position.
• The entire component is operable by keyboard alone, with no interactions that require a mouse or pointer device.

Common Mistakes

• Using a generic list or divs instead of a table, causing screen readers to lose the relationship between product names, quantities, and prices.
• Labeling all remove buttons identically as "Remove" without including the product name, making it impossible for screen reader users to distinguish between them.
• Updating the order total visually without adding a live region, leaving screen reader users unaware that the total has changed.
• Dropping focus to the document body after item removal, forcing keyboard users to navigate from the top to continue shopping.
• Disabling quantity buttons without communicating their disabled state programmatically, so users cannot tell why the control is unresponsive.

Why This Matters

The cart summary is one of the most transactional areas of any eCommerce experience. A screen reader user who cannot understand the relationship between items and their prices, or who misses an announcement that their total has changed, may complete a purchase with incorrect quantities or an unexpected cost. Poor focus management after item removal means keyboard users must navigate through the entire page to resume their task. Getting this component right means all users can review, adjust, and confirm their order with the same confidence as anyone using a mouse.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code