Altwise

Wishlist and favorite heart button accessibility: save for later, gift lists and registries

How to make wishlists, favorite heart buttons, save-for-later and shared gift lists accessible: button names and on/off states, announced “Saved” messages, not just a red heart, tap size, sign-in to save, the wishlist page and sharing.

Holiday shoppers save gifts to wishlists, tap little heart icons to "favorite" products, move items to "Save for later" in the cart and share gift lists or registries with family. These features are tiny icon buttons and quiet changes on the page, which makes them easy to get wrong for people who use a screen reader, a keyboard, voice control or a phone with large text. This guide covers how to make wishlists, favorites and save-for-later work for everyone.

1. The heart icon needs a name and an on/off state

A heart icon with no text is announced as just "button", or not at all, if it has no accessible name (WCAG 4.1.2). Make it a real <button>, give it a name that includes the product, and use aria-pressed so screen readers hear whether it is saved. Keep the name the same and let aria-pressed carry the state, rather than swapping the name between "Save" and "Remove". If the button also shows visible text, such as "Save", include that word in its name so voice control users can say it (WCAG 2.5.3).

<button type="button" class="wish" aria-pressed="false"
        aria-label="Save Cozy Night In gift box to wishlist">
  <svg aria-hidden="true" focusable="false">...heart...</svg>
</button>
<p class="visually-hidden" role="status" id="wish-status"></p>

<script>
document.querySelectorAll('.wish').forEach(function (b) {
  b.addEventListener('click', function () {
    var on = b.getAttribute('aria-pressed') !== 'true';
    b.setAttribute('aria-pressed', String(on));
    document.getElementById('wish-status').textContent =
      on ? 'Saved to your wishlist' : 'Removed from your wishlist';
  });
});
</script>

(The product name above is example data.)

2. Announce "Saved" without moving focus

When someone taps the heart, a filled icon is the only feedback many themes give. Screen reader users need a short message such as "Saved to your wishlist" in a status region, as in the code above (WCAG 4.1.3). Don't jump focus to a pop-up or the wishlist page; let people keep browsing. If you show a small "Saved" toast, keep it on screen long enough to read, or until dismissed (WCAG 2.2.1).

3. Don't rely on a filled or red heart alone

A heart that only changes from outline to red tells some colour-blind shoppers nothing (WCAG 1.4.1). Change the shape (outline to filled) as well as the colour, and make sure the icon has at least 3:1 contrast against the product photo or background behind it (WCAG 1.4.11). Hearts placed over busy product photos often fail; a small white circle behind the icon fixes it. See colour-only meaning.

4. Big enough to tap, reachable by keyboard

Heart buttons squeezed into the corner of a product card are easy to miss on a phone. Make the tap area at least 24 by 24 CSS pixels and keep it away from the product link so people don't open the product by mistake (WCAG 2.5.8). Heart buttons that only appear on mouse hover are invisible to keyboard and touch users; show them all the time, or at least on keyboard focus, with a visible focus outline (WCAG 2.1.1, WCAG 2.4.7). See product grids and quick view.

5. "Sign in to save" without losing the shopper

If saving needs an account, say so in the button's surrounding text or the message, and return people to the same product with the item saved after they sign in. Sign-in forms should allow password managers and paste, and avoid puzzle-only captchas (WCAG 3.3.8). See login and captcha accessibility.

6. The wishlist page itself

Give the page a clear heading and show each saved item with its name, option (size, colour) and price as real text, a link that names the product, and buttons named for the item, such as "Move Cozy Night In gift box to cart" and "Remove Cozy Night In gift box" (WCAG 2.4.4). When an item is removed, announce it and put focus on something sensible, such as the next item or the list heading, not the top of the page (WCAG 2.4.3). An empty wishlist should say so in words, with a link back to shopping. Stock and price changes, such as "Now on sale" or "Only 2 left", need words, not just a coloured badge.

7. "Save for later" in the cart

Moving an item from the cart to "Saved for later" changes two lists and the cart total at once. Announce what happened, such as "Moved to Saved for later. Cart total $52.00" (WCAG 4.1.3), keep both lists under real headings, and make sure the move can be undone with a "Move to cart" button. (The total above is example data.) See checkout accessibility.

8. Sharing a wishlist or gift registry

"Share my list" and "Copy link" buttons need text names and should announce "Link copied" (WCAG 4.1.3). Share pop-ups need focus moved in, a named close button and the Escape key (WCAG 2.1.2). The shared page that family members open should work without an account, show what has already been bought in words (not just a greyed-out photo), and have the same named buttons. Wedding and baby registries follow the same rules; see wedding and event venue websites.

Common mistakes

A 5-minute check you can do today

  1. On a collection page, press Tab. Can you reach a heart button for each product, and can you see it?
  2. Turn on VoiceOver or TalkBack and focus a heart. Does it say which product it saves, and whether it is saved?
  3. Tap it. Do you hear "Saved", and does the icon change shape as well as colour?
  4. Open your wishlist page. Do "Remove" and "Move to cart" buttons name the product?
  5. In the cart, use "Save for later". Is the new total announced or easy to find?

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag heart and icon buttons with no name, low-contrast text, missing focus outlines in some cases and blocked zoom on product and collection pages. It can't press the heart to check the on/off state or the "Saved" message, follow a sign-in flow, tell whether ten "Remove" buttons sound the same in context, or tell whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include collection, product and cart pages, and gives copy-paste fixes for your platform.

Building store themes for client shops? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any store platform, app or brand mentioned in the news.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.