Quantity Stepper

An accessible number input with clearly labeled increment and decrement controls that communicates boundary states and current values to both sighted users and assistive technology.

Demo

Use the minus and plus buttons to adjust the quantity below. Try reaching the minimum value of 1 and observe how the decrement button responds. You can also type a value directly into the number field. Navigate the component using only a keyboard and listen for how the current value and any boundary states are communicated to a screen reader.

Quantity for Blue T-Shirt

Quantity for Red Sneakers

What to Observe

The decrement and increment buttons have accessible names that describe their action — they do not rely on "–" and "+" symbols alone, which can be ambiguous to screen readers.
The numeric input field is labeled so screen reader users know it represents a quantity, not just a generic number field.
When the minimum or maximum limit is reached, the corresponding button is disabled and its disabled state is communicated programmatically, not just visually grayed out.
Updating the value via the buttons or direct text entry does not cause unexpected page navigation or lose the user's focus position.
The component groups the two buttons and the input under a shared label so the relationship between them is clear when encountered out of context.

Anatomy

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

Group label: A visible or visually associated label that identifies the stepper's purpose in context (e.g., "Quantity" or "Number of items").
Decrement button: Reduces the value by one step; labeled with text such as "Decrease quantity" rather than relying on the "–" character alone.
Quantity input: A number input field showing the current value; directly editable by keyboard and associated with the group label.
Increment button: Increases the value by one step; labeled with text such as "Increase quantity" rather than relying on the "+" character alone.
Boundary state indicator: The disabled state applied to either button when the minimum or maximum limit is reached, communicated both visually and programmatically.

Accessibility Behavior

Both buttons carry descriptive accessible names that explain their function without relying on symbolic characters that may be read inconsistently by screen readers.
The quantity input is associated with its label through standard HTML labeling so screen readers announce the field's purpose when it receives focus.
When the value reaches its minimum or maximum, the appropriate button is disabled with the native disabled attribute so assistive technologies report it as unavailable.
The stepper accepts direct keyboard input in the number field, giving users a fast alternative to repeatedly clicking the increment or decrement buttons.
Adjusting the quantity does not trigger automatic form submission or page refresh, preserving the user's position on the page.
The entire stepper — label, decrement, input, and increment — is grouped so that navigating by form control exposes the full context at once.

Common Mistakes

Using "–" and "+" as the sole accessible names for the buttons, which screen readers may announce as "minus" and "plus" with no indication of what is being changed.
Visually graying out a button at the boundary without setting its disabled attribute, so keyboard users can still Tab to and activate a control that should be inert.
Omitting a label on the number input so screen reader users encounter a field with no announced purpose when it receives focus.
Triggering form submission or a cart update automatically on every button press, causing unexpected page changes while the user is still adjusting the quantity.
Placing the group label far from the stepper controls in the DOM, breaking the programmatic association between the label and the interactive elements.

Why This Matters

Quantity steppers appear at critical decision points: product detail pages, cart summaries, and checkout. A blind user who cannot determine which direction the unlabeled "+" button adjusts, or who cannot tell whether the control has reached a minimum, may add the wrong number of items to their cart and only discover the error at checkout. A keyboard-only user who finds the decrement button still focusable at the minimum limit may become confused when activating it produces no result. Accessible quantity steppers keep all users in control of one of the most consequential inputs in the shopping flow.

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.