Hey all! I am currently working on making a site more accessible and my question that i'm in need of help with today is this... How can I a make a screen reader announce when a button has been clicked or removed? Heres some more context. Currently when a user is on a shop check out page and finds a product that they would like remove from their cart they then click on the "remove" button. My task here to to have a screen reader announce to the user that this product has been removed. So after they click the "removed" button the screen reader should announce this action to the user whether its something like: "Button pressed" or "Removed". This site has been coded using JavaScript and React Native. I have tried using
aria-relevant={'all'}
aria-atomic={true}
and
aria-role={alert}
on the component where the "remove" button lives. There is an onPress event that removes the product from the users cart. Is there a way to announce "Removed" when a user removes a product from their cart?? Whether is on the or in the onPress event handler/function??
Top comments (3)
Hi, you can set up a separate live region div that is visually hidden, then dynamically add “Removed” to it. Check out the note in the yellow box here: developer.mozilla.org/en-US/docs/W...
Thanks for the response Michael , I have tried adding aria-live with both 'assertive' and 'polite' I even tried wrapping the component in its own unique "" tag with only aria-live but nothing is being announced..
Looks like React Native has a special Accessibility API.
facebook.github.io/react-native/do...
There is one for Live Region but it’s Android only? You may have to dig a little deeper to see if there is an equivalent or workaround for iOS.