0

I have a "PayPal express checkout" button with a "Checkout" label which gets appended to the button after the page is loaded.

Paypal Button

Paypal Button

Paypal Button

When the page starts loading, the screen reader (Chromevox in my case) starts reading the title of the page and then comes down to heading and to the Alert Box, if any. This flow gets interrupted in the middle when PayPal button calls for its label and the "Checkout" text gets rendered.

I've tried adding the aria-live="off" property to the parent of the PayPal button, but it didn't help. Any other way to prevent it from interrupting the screen reader?

You can check the same using ChromeVox on the PayPal Button example page - https://developer.paypal.com/demo/checkout/#/pattern/client The Screenreader would start reading the title but a long bell sound would interrupt it with the PayPal animation.

Vibhor Dube
  • 4,173
  • 1
  • 22
  • 32
  • Where is your code – Preston PHX Jan 28 '21 at 05:03
  • Added a link to the PayPal button where the issue gets replicated. – Vibhor Dube Jan 28 '21 at 05:07
  • Can you tell me if any of this is related? https://stackoverflow.com/questions/39223952/accessibility-sr-only-or-aria-label and https://stackoverflow.com/a/51801205/3825777 If so, can you take whatever code you can use there and edit your question to show more of an attempt to code. https://stackoverflow.com/posts/65930949/edit I don't know why you linked to the same button that you posted here on stack. – react_or_angluar Jan 28 '21 at 12:11
  • @VibhorDube https://developer.paypal.com/demo/checkout/#/pattern/client does not replicate the issue without your code. – Preston PHX Jan 28 '21 at 13:27
  • @PrestonPHX, please open the URL with ChromeVOX enabled and see if it gets interrupted with a bell sound – Vibhor Dube Jan 29 '21 at 11:05

0 Answers0