Add to Cart Feedback
Critical - WCAG Level A
What the issue is: Add-to-cart controls often update on-screen cart state (count, contents) but don’t provide any programmatic status for assistive technology. Screen readers and other AT won’t announce a DOM-only visual change unless it is put into a live region or otherwise exposed. Without an appropriate announcement, keyboard-only and screen-reader users receive no confirmation that their action succeeded.
Why it matters: Users who rely on screen readers, speech output, or other AT need explicit, perceivable confirmations so they know whether an item was added. Otherwise they may repeat the action (causing duplicate orders), miss the change, or be unable to continue interacting with confidence. This problem particularly affects blind and low-vision users as well as people with cognitive disabilities who need clear feedback.
How to fix it: Create a dedicated, accessible status (live) region in the DOM that is visible to AT but visually hidden to sighted users. Use aria-live="polite" for non-interruptive confirmations (or "assertive" only for urgent failures), and set aria-atomic="true" so the entire string is announced. Update the live region’s text content whenever an item is added (avoid innerHTML with markup that might confuse AT). Ensure the live region is not display:none or removed from the DOM when announcing; it should be present and have visual-hidden CSS (e.g., .sr-only). Do not move focus away from the user unless necessary.
Best practices: Announce concise, meaningful messages including product name/quantity and resulting cart state (e.g., "Added 1 × Blue T‑shirt to cart. 3 items in cart."). Debounce rapid updates to avoid repeated announcements. Use polite for normal adds, assertive only for critical errors. Keep messages short and stable.
Common mistakes: Placing aria-live on the button itself; hiding the live region with display:none (screen readers ignore it); relying on title attributes or transient tooltips; changing aria-labels expecting an announcement; using role="alert" for benign confirmations (which can be disruptive). Avoid excessive verbosity and duplicate announcements.