Who this is for

This guide is for nonprofit teams, fundraising staff, web developers, and agency teams who build or maintain donation pages. It covers common accessibility issues specific to donation flows, including payment form integration, error recovery, and keyboard navigation.

What to check first

Donation pages combine form fields, payment handling, and trust signals. Each part needs to work for keyboard and screen reader users.

  • Donation amount controls: Are preset amount buttons clearly labeled? Can users manually enter a custom amount? Are currency symbols announced correctly?
  • Form fields: Does every input field have a visible label? Are required fields clearly marked?
  • Payment iframe: If the payment form is embedded in an iframe, does the iframe have a descriptive title?
  • Error handling: If a required field is empty or invalid, is the error clearly communicated and associated with the correct field?
  • Keyboard navigation: Can the full donation flow—amount selection, personal information, payment—be completed using only the keyboard?

Common accessibility issues on donation pages

  • Payment iframes without titles: Embedded payment forms often load inside an iframe. Without a descriptive title like "Credit card payment form," screen reader users cannot tell what the iframe contains.
  • Generic donation button text: A button that says just "Donate" or "Submit" does not clearly describe the action. Use "Donate now" or "Complete donation" instead.
  • Contrast issues in donation flows: Donation pages sometimes use brand colours with low contrast, making text hard to read. Test rendered text, not just design mockups.
  • Focus disappearing in payment forms: When a user tabs into an embedded payment iframe, keyboard focus may disappear or get trapped.
  • Error messages that do not explain the fix: An error like "Invalid field" does not tell someone what to correct. Use specific messages like "Please enter a valid card number."

What automated checks can help with

Use the SiteCheck Canada website accessibility checker with the "Donation page" page-type preset. It can detect missing form labels, empty buttons, iframe title issues, contrast problems, and other common machine-detectable issues. The accessibility issue library provides fix guidance for each finding.

What still needs human review

Automated tools cannot test whether the payment iframe focus works correctly, whether error messages are genuinely helpful, whether the donation flow works with specific assistive technology combinations, or whether third-party payment widgets are accessible. Manual testing is essential for donation pages.

Suggested workflow for donation page review

  1. Run the website accessibility checker with the "Donation page" preset.
  2. Fix unlabeled controls, iframe title issues, and empty buttons.
  3. Test the full donation flow with keyboard only: amount selection, form fields, payment form, and confirmation.
  4. Test with a screen reader to verify labels, instructions, and errors are announced clearly.
  5. Test error recovery: submit an incomplete form and confirm errors are clear and actionable.
  6. Review the nonprofit accessibility checklist for broader organizational guidance.

Useful SiteCheck Canada tools

Recommended next steps

Run the checker Scan your donation page with the donation page preset. Nonprofit checklist Broader guidance for nonprofit sites. Browse the issue library Fix form, label, and iframe findings. Read what automation misses Plan manual payment flow testing.