Altwise

Holiday gift guide pages accessibility: gift boxes, bundles and “Shop now” links

How to make a small business holiday gift guide accessible: real section headings, alt text that helps people choose, prices and gift box contents in real text, links that name the gift, price filters, phone layouts and shipping deadlines in words.

From mid-November, many small shops, florists, bakeries, salons and makers post a holiday gift guide: a blog post or landing page with picks like "Gifts under $25", "For the coffee lover" and "Stocking stuffers", plus gift boxes, bundles and advent calendars. Gift guides are mostly photos, prices and "Shop now" links, which is exactly where accessibility problems hide. This guide covers how to make a gift guide that people using a screen reader, a keyboard, a phone with large text or a slow connection can actually shop from.

1. Use real headings for each section

Make "Under $25", "For the host" and "Stocking stuffers" real headings, not bold text or words inside a banner image, so screen reader users can jump between sections and everyone can scan the page (WCAG 1.3.1, WCAG 2.4.6). Keep one main heading for the page, then a heading for each section and, if you like, a smaller heading for each gift. See heading structure.

2. Gift photos need alt text that helps someone choose

A gift guide photo is doing the selling, so its alt text should describe what matters for the choice, such as "Hand-poured soy candle in a green glass jar with a wooden lid", not "IMG_4471" or "candle" (WCAG 1.1.1). If the gift name and description already sit right next to a purely decorative photo, empty alt="" avoids repeating it. Collage graphics with several products and prices baked into one image are hard to use; show each gift as its own photo with text beside it. See alt text examples.

3. Put names, prices and "what's included" in real text

Prices, sizes and gift box contents written inside a graphic can't be read by screen readers, don't reflow on phones and blur when zoomed (WCAG 1.4.5). For bundles, gift boxes and advent calendars, list what's inside as a real list, with sizes, so every shopper knows exactly what they are buying. That clarity helps everyone and can mean fewer disappointed buyers and returns.

<h3>Cozy Night In gift box, $48</h3>
<img src="cozy-box.jpg" alt="Kraft gift box with a candle, tea tin, wool socks and chocolate bar">
<p>What's inside:</p>
<ul>
  <li>Soy candle, 8 oz</li>
  <li>Loose-leaf chamomile tea, 2 oz tin</li>
  <li>Wool-blend socks, one size</li>
  <li>Dark chocolate bar, 3 oz</li>
</ul>
<a href="/products/cozy-night-in-box">Shop the Cozy Night In gift box</a>

(The product and price above are example data.)

4. "Shop now" links that say where they go

A page with twenty "Shop now" or "Buy" links sounds like the same link twenty times to a screen reader user who lists the links. Use the gift's name in the link, such as "Shop the Cozy Night In gift box", or make the product name itself the link (WCAG 2.4.4). If a link goes to another store or marketplace, say so in the text. See link text and buttons.

5. Price filters and "jump to" menus

"Jump to: Under $25 | Under $50 | For kids" menus at the top of a long guide are helpful when they are real links to the section headings and work with the keyboard (WCAG 2.1.1). If you use tabs or buttons to filter gifts by price, each one needs a name and a state that screen readers can read (WCAG 4.1.2), and the result should be announced, such as "12 gifts under $25" (WCAG 4.1.3). See tabs and toggle switches and price sliders and filters.

6. Make it work on phones

Most gift browsing happens on phones. Gift cards in the guide should stack in one column without sideways scrolling (WCAG 1.4.10), text should zoom to 200% without being cut off, and "Shop" and "Add to cart" buttons should be easy to tap, at least 24 by 24 CSS pixels (WCAG 2.5.8). Swipe-only product carousels need buttons as well; see image sliders and carousels.

7. Shipping cut-offs and gift notes in plain words

Write holiday order deadlines as text with a date, such as "Order by Friday, Dec 18 for delivery before Christmas (US standard shipping)", not only in a festive graphic, and keep that text at a readable contrast (WCAG 1.4.3). (The date above is example data.) Gift message boxes and "This is a gift" checkboxes need real labels; see gift card pages and shipping and returns pages.

8. Gift guides for service businesses

Salons, studios, restaurants and tour operators often feature gift cards, class passes and experience packages instead of products. The same rules apply: a real heading for each option, what's included and any expiry or booking limits in real text, and a link that names the option, such as "Buy a 5-class pass".

Common mistakes

A 5-minute check you can do today

  1. Open your gift guide on a phone. Does everything fit in one column, and can you zoom in?
  2. Use only the Tab key. Can you reach every gift link, and can you see where you are?
  3. Turn on VoiceOver or TalkBack and list the links. Does each one say which gift it is for?
  4. Pick a gift box or bundle. Is what's inside listed in text, with sizes?
  5. Find your holiday shipping deadline. Can you select it as text?

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 photos with no alt text, low-contrast text, links and buttons with no name, skipped heading levels and blocked zoom on your gift guide. It can't judge whether alt text helps someone choose a gift, notice that prices or contents are only inside an image when the image has some alt text, tell whether twenty links sound the same, or tell whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your gift guide and product pages, and gives copy-paste fixes for your platform.

Building holiday gift guides 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, publication 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.

Adding heart icons or a wishlist? See wishlist, favorite and save-for-later buttons.

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.