Wishlist Button

A toggle button that lets users save or remove products from their wishlist, communicating its pressed state clearly to assistive technology through both visual and programmatic state changes.

Demo

Click or press Space/Enter on the wishlist button below to toggle it between saved and unsaved states. Observe how the visual appearance changes and, with a screen reader active, listen for the state announcement. Try both the icon-only and text variants and note how each communicates the button's current state without requiring mouse interaction.

Icon-only variants

Text variants

What to Observe

The button's accessible name reflects its current action — not just its static label — so users understand what will happen when they activate it in its current state.
The pressed state is communicated programmatically so a screen reader announces whether the item is currently saved to the wishlist or not.
The icon-only variant has an accessible name that conveys its full purpose, not just "heart" or a decorative character that lacks context.
Activating the button does not cause page navigation or a full page reload — it toggles state in place, and the outcome is confirmed to the user.
The visual change on toggle — such as a filled versus unfilled heart icon — is not the only means of communicating the state change; the accessible label or announced state also reflects it.

Anatomy

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

Toggle button element: A native button element with a pressed state attribute that reflects whether the item is currently saved to the wishlist.
Icon: A heart or bookmark icon that visually represents the saved/unsaved state; decorative when the button has a text label, accessible when icon-only.
Accessible name: The text or label exposed to assistive technology; updates to reflect the button's current context (e.g., "Save to wishlist" or "Remove from wishlist").
Pressed state indicator: The programmatic attribute that communicates the current toggle state to screen readers — true when saved, false when unsaved.
Confirmation feedback (optional): A brief visible or announced message confirming the action, such as "Added to wishlist" or "Removed from wishlist".

Accessibility Behavior

The button uses a pressed state attribute to communicate its current toggle state so screen readers announce whether the item is saved or not when the button receives focus.
The button's accessible name describes the action in context — "Save to wishlist" when unsaved and "Remove from wishlist" when saved — so users know what will happen before they act.
Icon-only variants include a visually hidden text label or accessible name so the button's purpose is not lost when there is no visible text.
Activating the button does not navigate away from the page — users remain in place and can continue browsing after saving or removing a product.
The state change is confirmed through the programmatic state update and, optionally, a live-region announcement so screen reader users receive immediate feedback.
The button is reachable and operable by keyboard, with a clearly visible focus indicator that meets contrast requirements.

Common Mistakes

Using a static label such as "Wishlist" or "Favorite" that never changes regardless of the button's current state, leaving screen reader users unable to determine whether the item is saved.
Implementing the wishlist toggle as a link or anchor element, which implies navigation and creates incorrect expectations for keyboard and screen reader users.
Conveying the saved state only through a color change — such as filling the heart icon red — without a programmatic state attribute, making the state invisible in high-contrast mode or to users with color-vision differences.
Providing an icon-only button with no accessible name, so screen readers announce "button" or the icon's unicode character with no explanation of its purpose.
Triggering a full page reload when the wishlist state changes, causing keyboard focus to reset to the top of the page and forcing the user to navigate back to their place.

Why This Matters

Wishlist functionality is a lightweight but meaningful part of the shopping experience — it lets users bookmark products for later without committing to a purchase. A screen reader user who cannot determine whether an item is already saved, or who activates a button without knowing it will remove a previously saved item, may inadvertently lose their wishlist contents. An icon-only button with no accessible name is completely opaque to users navigating by screen reader. When the wishlist button is accessible, all users can build, manage, and return to their saved items with the same ease and confidence.

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.