Altwise

Pay-your-bill page accessibility: invoice and online payment forms for small businesses

How to make your online bill-pay or invoice payment page usable for screen reader, keyboard and low-vision customers: clear labels, helpful errors, embedded card fields, time-outs, review step, receipts and a phone option.

Many service businesses have a "Pay your bill" or "Pay an invoice" page: a dental office, a law firm, a contractor, a property manager, a school. It's often the page a returning customer needs most, and if they can't find the amount field or the error message, they have to call you or pay late. This guide covers the checks that matter on that page, whichever payment form or provider you use.

1. Make the page easy to find

Put a "Pay your bill" link in your main menu or footer, with that exact wording, not only an icon or a button inside an image. Give the page a clear title such as "Pay your bill | Your Business Name" (WCAG 2.4.2) and one main heading. If invoices or emails include a link, point it straight to this page. See link text and buttons.

2. Every field needs a visible label

Invoice number, account number, patient or client name, amount and email all need a visible label that stays visible while typing; placeholder text that disappears isn't enough (WCAG 3.3.2). Say where to find the invoice number ("on the top right of your statement") as text, not only in a picture of a sample bill.

<label for="inv">Invoice number (top right of your statement)</label>
<input id="inv" name="invoice" autocomplete="off">
<label for="amt">Amount to pay (USD)</label>
<input id="amt" name="amount" inputmode="decimal">

Use autocomplete on name, email, phone and card fields so browsers and password managers can fill them (WCAG 1.3.5). See accessible contact forms.

3. Error messages that say what went wrong

"Invalid input" in red doesn't help. Say which field and how to fix it ("Amount must be a number, like 125.00"), put the message next to the field in text, not colour alone, and keep what the person already typed (WCAG 3.3.1, 3.3.3). See accessible form error messages.

4. Keyboard, focus and time limits

Tab through the whole page, including the card fields and the Pay button. Each one should show a visible outline (WCAG 2.4.7) and work with Enter or Space. Card fields are often an embedded frame from your payment provider; test that you can tab into and out of it. If the page times out, warn people before it does and let them ask for more time (WCAG 2.2.1). Avoid a puzzle CAPTCHA as the only way to pay. See login and CAPTCHA accessibility.

5. Review before paying, and a clear receipt

Show a summary of the amount and what it's for before the final Pay button, and let people go back and correct it (WCAG 3.3.4). After payment, show a confirmation with a heading and the amount in text, and send a receipt by email. A screen reader should hear that the payment worked; moving focus to the confirmation heading helps.

6. Zoom, phones and contrast

Many people pay bills on a phone. Zoom to 200% and check that the fields stack and the Pay button doesn't fall off the screen (WCAG 1.4.10). Check label, hint and button colours with the free colour contrast checker (4.5:1 for normal text, WCAG 1.4.3). See mobile zoom and tap targets.

7. Always offer another way to pay

Some people can't use any online form. Put a phone number and mailing address for payments on the page as text, with your office hours. That doesn't replace fixing the form, but it means nobody is stuck.

Embedded payment form or hosted payment page?

If you use a hosted payment page or an embedded form from your payment provider, invoicing tool or practice software, you usually control the page around it (title, heading, instructions, link text, contact details) and some form settings, but not the card fields' code. Test the whole flow anyway. If the provider's part has a barrier you can't change, report it to their support team and keep the phone option visible. Settings and features change, so check your provider's own help pages for current options.

Common mistakes

A 10-minute check you can do today

  1. From your homepage, find the bill-pay page using only the keyboard.
  2. Fill in the form with a wrong amount on purpose. Is the error clear, and is your typing kept?
  3. Zoom to 200% on your phone and complete the form up to the final Pay button.
  4. Turn on VoiceOver or TalkBack and listen to the field labels. See the 10-minute screen reader test.
  5. Check that a phone number for payments is on the page 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 fields with no label, buttons with no name, many contrast problems and a missing page title or language. It can't tell whether your error messages make sense, whether the card fields inside a provider's frame work with a keyboard, or whether a time-out warning works, and it can't tell you whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your bill-pay page, and gives copy-paste fixes for your platform; for a provider's embedded fields, it notes what to report to the provider.

Building payment pages for clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

Altwise isn't affiliated with any payment provider or invoicing tool. 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.

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.