Altwise

GivingTuesday and year-end donation pages everyone can use: amounts, monthly gifts, progress bars and receipts

How to make a nonprofit, church or school donate page accessible before GivingTuesday (December 1, 2026) and year-end giving: a clear amount picker, a monthly choice that's announced, dedication and fee options, autofill, a quiet progress bar and match countdown, a review step and text receipts, with copyable code and a 5-minute check.

GivingTuesday falls on the Tuesday after US Thanksgiving, which is December 1 in 2026, and year-end appeals keep running through December 31. For many nonprofits, churches, schools and community groups, those few weeks bring in a big share of the year's online gifts, so the donate page matters more than any other page on the site. A typical donate page asks for an amount, one-time or monthly, maybe a dedication ("in honor of"), whether to cover the processing fee, the donor's details and payment. A progress bar or a matching-gift countdown often sits on top. Each piece can stop a donor who uses a screen reader, a keyboard, voice control or a magnifier: amount buttons that don't say which one is picked, a monthly toggle that's silent, a progress bar that's only a picture, or a countdown that talks every second. Here's how to fix the common cases.

1. An amount picker that says what's picked

Suggested amounts like $25, $50 and $100 are 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). If the picked amount is shown only by a colour change, sighted donors with low vision or colour blindness can miss it too (1.4.1 Use of Color). Give "Other amount" a visible label and say any minimum up front (3.3.2 Labels or Instructions).

<fieldset class="give-amounts">
  <legend>Gift 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="other"> Other amount</label>

  <label for="other-amount">Other amount in dollars</label>
  <p id="other-amount-hint" class="hint">Any amount of $5 or more.</p>
  <input id="other-amount" name="other_amount" type="text" inputmode="decimal"
         aria-describedby="other-amount-hint other-amount-error">
  <p id="other-amount-error" class="error" hidden></p>
</fieldset>

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

The amounts above are examples. If you show what a gift does ("$50 feeds a family for a week"), put that sentence in the label text or right next to it as text, not only inside an image. If someone types "fifty" or $2, say exactly what's wrong and how to fix it (3.3.1 Error Identification, 3.3.3 Error Suggestion). See form error messages.

2. One-time or monthly, said out loud

Many donate forms use a sliding toggle for "Make it monthly". A styled toggle often has no name and no on/off state for a screen reader, so a donor can sign up for a monthly gift without knowing it. Use two radio buttons, or a real checkbox with a clear label, and repeat the choice next to the donate button (4.1.2 Name, Role, Value, 3.3.2 Labels or Instructions).

<fieldset>
  <legend>How often?</legend>
  <label><input type="radio" name="frequency" value="once" checked> One time</label>
  <label><input type="radio" name="frequency" value="monthly"> Monthly (you can cancel any time)</label>
</fieldset>

<button type="submit" id="give-btn">Donate $50 once</button>
<script>
  // keep the button text in step with the choices, so the total is never a surprise
  const form = document.querySelector('form');
  form.addEventListener('change', () => {
    const amt = form.amount.value === 'other' ? form.other_amount.value : form.amount.value;
    const freq = form.frequency.value === 'monthly' ? 'every month' : 'once';
    document.getElementById('give-btn').textContent = 'Donate $' + (amt || '…') + ' ' + freq;
  });
</script>
<!-- example wording; say how your real monthly gifts can be cancelled -->

Only say "cancel any time" if that's true for your donation tool, and say how (for example, a link in the receipt email).

3. Dedications and the fee checkbox

"Give in honor or memory of someone" usually reveals extra fields. Use a real checkbox, keep the new fields right after it in the reading and Tab order, and label them ("Honoree's name", "Send a card to (email, optional)"), not just with placeholders (2.4.3 Focus Order, 3.3.2 Labels or Instructions). For "cover the processing fee", show the extra amount as text in the label, such as "Add $1.80 to cover card fees", so the donor knows the total before paying.

<label><input type="checkbox" id="tribute" aria-controls="tribute-fields" aria-expanded="false">
  Give in honor or memory of someone</label>
<div id="tribute-fields" hidden>
  <label for="honoree">Honoree's name</label>
  <input id="honoree" name="honoree" autocomplete="off">
</div>

<label><input type="checkbox" name="cover_fee" id="cover-fee">
  Add <span id="fee-amount">$1.80</span> to cover card fees (optional)</label>

<script>
  const t = document.getElementById('tribute');
  t.addEventListener('change', () => {
    document.getElementById('tribute-fields').hidden = !t.checked;
    t.setAttribute('aria-expanded', t.checked);
  });
</script>
<!-- example fee; calculate your real one -->

4. Donor details without retyping

Use visible labels and let the browser fill in the donor's own name, email and address (1.3.5 Identify Input Purpose). Don't make people type the same thing twice in one gift, such as the billing address again for the receipt; offer "Same as above" instead (3.3.7 Redundant Entry). Mark required fields in words, not only with a red asterisk. See accessible contact forms.

<label for="d-name">Full name</label>
<input id="d-name" name="name" autocomplete="name" required>
<label for="d-email">Email (for your tax receipt)</label>
<input id="d-email" name="email" type="email" autocomplete="email" required>
<label for="d-zip">ZIP code</label>
<input id="d-zip" name="zip" autocomplete="postal-code" inputmode="numeric">

5. A progress bar and match countdown that don't shout

A campaign thermometer that's only an image or a coloured bar says nothing to a screen reader. Put the numbers in text next to it ("$6,240 raised of our $10,000 goal") (1.1.1 Non-text Content). If the total updates live, announce it at most occasionally with a status region, never on a timer every few seconds (4.1.3 Status Messages). A "match ends in 02:14:09" countdown that ticks every second should not be a live region at all, and give the end time in words too ("Our match ends at midnight Central Time on December 1"). If your form itself times out, warn donors and let them extend the time (2.2.1 Timing Adjustable). See the countdown and time-limit guide.

<figure class="goal">
  <progress id="goal-bar" max="10000" value="6240" aria-labelledby="goal-text"></progress>
  <figcaption id="goal-text">$6,240 raised of our $10,000 goal</figcaption>
</figure>
<p>Every gift is matched until <strong>11:59 PM Central Time on Tuesday, December 1</strong>.</p>
<!-- example totals, goal and deadline; use your real ones, and only say "matched" if a match is really in place -->

6. A review step, a clear confirmation and a readable receipt

A donation is a money transaction, so let donors check the amount, frequency, dedication and fee before it's final, with a way to go back and change them (3.3.4 Error Prevention (Legal, Financial, Data)). After paying, move focus to a confirmation heading that says what happened ("Thank you. Your $50 monthly gift is set up."), and send a receipt email with the amount, date, frequency and your organisation's details as real text, not only inside an image (1.4.5 Images of Text). If you use a "prove you're human" check, make sure it doesn't depend on solving a puzzle alone (3.3.8 Accessible Authentication (Minimum)). See CAPTCHA and login accessibility and accessible emails.

7. Donate buttons, pop-ups and embedded forms

"Donate" buttons in the header and year-end pop-ups should be reachable with the keyboard, close with Escape, return focus where the donor was, and not cover the form on a phone (2.4.3 Focus Order, 2.5.8 Target Size (Minimum), 1.4.10 Reflow). If your donate form is embedded from a donation platform, give the frame a title (4.1.2 Name, Role, Value) and test it with only a keyboard; you can't always change its code, but you can choose its settings, report problems to the vendor, and offer another way to give (a phone number or mailing address) as text. See pop-ups and chat widgets.

<iframe src="https://donate.example.org/form/year-end" title="Year-end donation form" loading="lazy"></iframe>
<p>Prefer to give by phone or mail? Call (555) 010-0199 or mail a check to
   100 Example St, Tulsa, OK 74103.</p>
<!-- example URL, phone and address; use your own -->

Platform notes

Settings and features change often, so check your tool's own help pages for the current options.

Common mistakes

A 5-minute check you can do today

  1. Open your donate page and press Tab. Can you pick an amount and the monthly option, and see 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. Turn on your phone's screen reader (VoiceOver or TalkBack) and listen to the progress bar and the monthly choice. See our screen reader test.
  4. Zoom your browser to 200% and check the form and donate button still fit.
  5. Make a small test gift. Is the receipt email readable as text?

What a scan can and can't check here

An automated scan finds only part of the barriers on the pages it visits. On a donate page it can flag unlabelled fields, buttons with no name, low contrast, missing frame titles and images with no alt text. It may not see inside a donation form embedded from another domain, and it can't tell whether the picked amount is clear, whether the monthly choice is announced, how a countdown behaves or what's in your receipt email, which is why the 5-minute check above matters. Our Fix-Pack reports include copy-paste fixes for what the scan finds on up to 10 pages.

Building donate pages for several nonprofit clients? The agency 5-pack gives you five white-label reports to use within 12 months.

Related: nonprofit and church websites, gift card pages, countdowns and time limits, accessible contact forms, WCAG 2.2 explained.

This is general technical guidance, not legal or tax 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.

Showing results, an impact report or a goal thermometer? See charts, graphs and infographics accessibility.

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.