Quantity Change Button Feedback
Critical - WCAG Level A
What the issue is:
Quantity change buttons (e.g., +/– in a shopping cart) update only visible DOM text and provide no accessible notification to assistive technologies. Screen reader users may not be informed that an update occurred or what the new value is, leaving them unsure whether their action succeeded.
Why it matters:
Users who rely on screen readers or other AT do not see visual changes. Without an accessible status announcement, they must re-navigate the UI to verify the quantity or may assume the application is broken. Keyboard-only users may be able to focus the control but still miss contextual confirmation unless it’s announced.
How to fix it:
Keep buttons as semantic controls (button element) and ensure they have accessible names (visible label or aria-label). Avoid using non-button elements for interactive controls.
Add an ARIA live region that will receive programmatic text updates when the quantity changes. A single shared region for cart updates is often best.
Use aria-live="polite" (or role="status") and aria-atomic="true" on that region so screen readers announce the full message. Use role="alert" / aria-live="assertive" only for urgent errors.
On each quantity change, update the live region’s textContent with a concise message (e.g., "Quantity of Blue T-shirt updated to 3"). Include item identity when multiple items may change.
Keep messages short, localized, and change the text content (even if the same element is reused) to ensure AT will read it.
Best practices:
Use aria-atomic="true" to ensure the whole message is read
Prefer polite announcements to avoid interrupting users
Debounce rapid updates so you don’t overwhelm AT
Use a single centralized live-region for related status messages
Ensure messages are meaningful but brief and localized.
Common mistakes to avoid:
Relying only on visual updates (no live region)
Putting the live region inside interactive controls
Using aria-hidden on the updated element and thinking AT will still announce it
Overusing assertive alerts
Updating only attributes (like title) that aren’t reliably announced.
Avoid creating announcements that contain too much data or change constantly, which can be confusing.