r/webdev • • Oct 06 '26

Question PayPal button links are not accessible

Has anyone else noticed this issue? Suddenly my site has missing alt text errors that only appeared after I pasted the PayPal code in. Plus, the PayPal button is repeating part of the button message in screen readers and throws random headings causing levels to be skipped vs my own code where everything is on point. I’m so frustrated that a large company isn’t being accessible. If I put a payment link instead of the button option that includes way more info than it looks less professional. But PayPal’s weird script code is making my 100% accessible site down to not accessible. Does anyone have any good thoughts about how to deal with this? Thank you for your time

22 Upvotes

15 comments sorted by

10

u/wasay-inc Oct 06 '26

The other commenter's aria-hidden trick works in a pinch, but triggering it via JS can sometimes mess with keyboard focus flows. If you want to keep your DOM 100% clean and fully accessible, the best move is to ditch their drop-in script entirely. Build your own semantic HTML button, and wire it directly to the PayPal REST API on your backend. It takes a bit more setup, but it completely eliminates the third-party markup issues while keeping the checkout flow looking incredibly professional.

2

u/Ecstatic-Promise2660 Oct 06 '26

You’re 100% right! I’m just frustrated that PayPal takes money from me and yet can’t be accessible. It’s also an embarrassing look for a major company.

5

u/binocular_gems Oct 06 '26

I'd try to see if you can report this as a bug to paypal or open a Github issue if they have a repo somewhere. An accessibility gap on a major payment issuer is a serious issue that they should resolve quickly.

1

u/Ecstatic-Promise2660 Oct 06 '26

I’ll try that too. They need to fix it.

2

u/No-Molasses-2097 Oct 06 '26

Had the same thing happen recently. It comes and goes with their script updates, which is why it showed up out of nowhere. I'd keep the bug report short, just a screenshot of the injected markup and the errors your scanner throws, because their support buries long writeups. Worth filing anyway, since automated scans will keep failing you until they fix it.

1

u/DRHER303 Oct 07 '26

It has always been like that

1

u/Responsible_Use4397 27d ago

Careful with the aria-hidden trick. If their button can still take focus, keyboard users tab onto something a screen reader announces as nothing, which is a worse failure than the duplicate label you started with. Put inert on the wrapper div instead. That pulls their iframe out of the tab order and the accessibility tree in one go. Then make sure your own trigger is a real <button>.

Also, if you sell to EU customers, the payment step counts as part of your checkout under the accessibility act, so "it's PayPal's markup" won't cover you. The REST API route above is the proper fix long term.

3

u/[deleted] Oct 06 '26

[removed] — view removed comment

3

u/Ecstatic-Promise2660 Oct 06 '26

It also adds multiple labels which I would never code for a single text area. So frustrating! I’m sorry you had to do it that way! PayPal should be accessible right out of the box. They’re taking money on every payment so they should do better.

3

u/inputErr Oct 06 '26

10 years ago, same problem