Altwise

Gift card pages everyone can use: amounts, messages, send dates and balance checks

How to make a small business gift card page accessible: a clear amount picker, labelled buyer and recipient fields, a quiet message counter, a keyboard-friendly send date, a review step, text gift cards and a CAPTCHA-free balance check, with copyable code and a 5-minute check.

Gift cards are one of the easiest things a small business can sell in the holiday rush, and "shop local" pushes such as the Saturday after Thanksgiving send plenty of last-minute buyers to local shops, salons, restaurants and studios looking for one. A gift card page is usually short: pick an amount, say who it's for, add a message, choose when to send it, and pay. Later, someone checks the balance. Each of those steps can quietly stop a customer who uses a screen reader, a keyboard, voice control or a magnifier: amount buttons that don't say which one is picked, a "custom amount" box with no label, a message counter that talks over every keystroke, a delivery date picker that only works with a mouse, or a balance check hidden behind a puzzle CAPTCHA. Here's how to fix the common cases.

1. An amount picker that says what's picked

Amount choices like $25, $50 and $100 are a set of options where only one can be chosen, so build them as a radio group with a group label (1.3.1 Info and Relationships, 4.1.2 Name, Role, Value). Styled buttons that only change colour when picked don't tell a screen reader anything, and colour alone isn't enough for sighted visitors either (1.4.1 Use of Color). Give the custom amount a visible label and say the limits up front (3.3.2 Labels or Instructions), and keep each choice at least 24 by 24 pixels (2.5.8 Target Size (Minimum)).

<fieldset class="gift-amounts">
  <legend>Gift card amount</legend>
  <label><input type="radio" name="amount" value="25"> $25</label>
  <label><input type="radio" name="amount" value="50" checked> $50</label>
  <label><input type="radio" name="amount" value="100"> $100</label>
  <label><input type="radio" name="amount" value="custom"> Other amount</label>

  <label for="custom-amount">Other amount in dollars</label>
  <p id="custom-amount-hint" class="hint">Any whole amount from $10 to $500.</p>
  <input id="custom-amount" name="custom_amount" type="text" inputmode="numeric"
         aria-describedby="custom-amount-hint custom-amount-error">
  <p id="custom-amount-error" class="error" hidden></p>
</fieldset>

<style>
  .gift-amounts label { display: inline-flex; align-items: center; gap: .4em;
                        min-height: 44px; padding: 0 .9em; border: 2px solid #595959; border-radius: 6px; }
  .gift-amounts label:has(input:checked) { border-width: 4px; border-color: #1a1a1a; font-weight: 700; }
  .gift-amounts label:has(input:checked)::after { content: " (selected)"; font-weight: 400; }
  .gift-amounts input:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }
</style>
<!-- example amounts and limits; use your real ones -->

The amounts and limits above are example values. If someone types $5 or "fifty", say exactly what's wrong and how to fix it, for example "Enter a whole amount from $10 to $500" (3.3.1 Error Identification, 3.3.3 Error Suggestion). See form error messages and colour-only meaning.

2. Buyer and recipient fields that are clearly labelled

Gift card forms ask for two sets of details, which confuses everyone when the labels are only placeholders that vanish as you type. Group them with headings or fieldsets ("Your details" and "Who it's for"), use visible labels, and let the browser fill in the buyer's own name and email (1.3.5 Identify Input Purpose). Turn autofill off for the recipient's fields, so the buyer's own email isn't filled in by mistake.

<fieldset>
  <legend>Your details</legend>
  <label for="buyer-name">Your name</label>
  <input id="buyer-name" name="buyer_name" autocomplete="name" required>
  <label for="buyer-email">Your email (for the receipt)</label>
  <input id="buyer-email" name="buyer_email" type="email" autocomplete="email" required>
</fieldset>

<fieldset>
  <legend>Who it's for</legend>
  <label for="to-name">Recipient's name</label>
  <input id="to-name" name="to_name" autocomplete="off" required>
  <label for="to-email">Recipient's email (we send the gift card here)</label>
  <input id="to-email" name="to_email" type="email" autocomplete="off" required>
</fieldset>

3. A gift message counter that doesn't talk over typing

A "120 characters left" counter that updates a live region on every keystroke makes a screen reader interrupt itself constantly. Show the limit in the hint, update the visible count as people type, and only announce it when they're close to the limit (4.1.3 Status Messages). Never silently cut off what someone typed.

<label for="gift-msg">Gift message (optional)</label>
<p id="gift-msg-hint" class="hint">Up to 200 characters.</p>
<textarea id="gift-msg" name="message" rows="4" maxlength="200"
          aria-describedby="gift-msg-hint gift-msg-count"></textarea>
<p id="gift-msg-count" class="hint">200 characters left</p>
<p id="gift-msg-live" class="sr-only" role="status"></p>

<script>
  const msg = document.getElementById('gift-msg');
  const count = document.getElementById('gift-msg-count');
  const live = document.getElementById('gift-msg-live');
  let warned = false;
  msg.addEventListener('input', () => {
    const left = 200 - msg.value.length;
    count.textContent = left + ' characters left';          // visible, not announced each key
    if (left <= 20 && !warned) { live.textContent = left + ' characters left'; warned = true; }
    if (left > 20) { warned = false; live.textContent = ''; }
  });
</script>
<!-- example limit; match your platform's real message length -->

4. Choosing when the gift card is sent

"Send on" date pickers are often a pop-up calendar that only works with a mouse. The simplest accessible option is the browser's own date field, which works with a keyboard and screen readers, plus a hint in words. Offer "Send now" as a radio choice so most buyers don't need the date at all.

<fieldset>
  <legend>When should we email it?</legend>
  <label><input type="radio" name="send" value="now" checked> Send now</label>
  <label><input type="radio" name="send" value="later"> Send on a date I choose</label>
  <label for="send-date">Send date</label>
  <p id="send-date-hint" class="hint">We send at 8 AM Central Time on that day.</p>
  <input id="send-date" name="send_date" type="date" aria-describedby="send-date-hint">
</fieldset>
<!-- example send time; say your real one -->

The send time above is an example. If you use a custom calendar widget, test it with only a keyboard; see the booking widget guide, which covers date pickers in more detail.

5. A review step before paying

A gift card is a money transaction, so give buyers a chance to check and fix it before it's final: show the amount, recipient name and email, message and send date as text, with "Edit" links, before the payment step (3.3.4 Error Prevention (Legal, Financial, Data)). A typo in the recipient's email is the most common gift card problem, and a review step catches it for every customer. If your cart or checkout has a time limit, warn people and let them extend it; see holiday countdowns and time limits.

6. The gift card itself, and the balance check

Many e-gift cards are sent as a single picture with the amount, code and expiry inside the image. Put the essentials in the email or page as real text too: the business name, amount, code, how to use it and any terms (1.4.5 Images of Text, 1.1.1 Non-text Content). Give the card image short alt text such as "Gift card from [business name]" so it isn't read as a file name.

For a "check your balance" page, use labelled fields for the card number and PIN, allow pasting, and don't block the form with a puzzle or image CAPTCHA that asks people to solve, remember or transcribe something (3.3.8 Accessible Authentication (Minimum)). Show the result in text, such as "Balance: $32.50", in a status message so it's announced. If the number isn't found, say so in words and offer a phone number or email. See login and CAPTCHA accessibility.

Platform notes

Settings and app names change often, so check your platform's or app's own help pages for the current option.

Common mistakes

A 5-minute check you can do today

  1. Open your gift card page and press Tab. Can you reach and pick every amount, and can you tell which is picked without relying on colour? See our keyboard test.
  2. Type an amount below your minimum. Does the message say what's wrong and what's allowed?
  3. Click into each field. Is there still a visible label once you start typing?
  4. Choose a send date using only the keyboard.
  5. Buy a small test gift card for yourself. Is the amount, code and how to use it in the email as text, not only in a picture?
  6. Try your balance check on a phone. Can you paste the code, and is the result written out?

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits. On a gift card page it can flag form fields with no label, radio-style buttons with no name, images with no alt attribute, low contrast and missing page titles. It can't tell whether the selected amount is clear without colour, whether error messages are helpful, how a counter behaves while typing, whether a date picker works with a keyboard, or what's inside your gift card emails, which is why the 5-minute check above matters. Our Fix-Pack reports include copy-paste fixes for your platform for what the scan finds.

Related: florists, bakeries and gift shops, online store checkout, accessible contact forms, accessible emails, WCAG 2.2 explained.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

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.

Getting ready for GivingTuesday or year-end appeals? See donation pages everyone can use.

Running a Black Friday or holiday sale? See promo codes, sale prices and sale banners.

Putting together a holiday gift guide? See holiday gift guide pages, gift boxes and bundles.

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.