braintree
Better support for screen readers
General information
- SDK version: 3.69.0
- Environment: Sandbox
- Browser and OS: Chrome 88.0.4324.27, Safari 13.0.5, Firefox 81.0.1 on MacOS Catalina 10.15.3
Issue description
The internalLabel label is a good help for accessibility concerns. Nonetheless, it is difficult to use a screenreader in combination with hosted frames. I have been testing using VoiceOver on my mac. This is what VoiceOver outputs when tabbing between fields on the different browsers.
Chrome
Leaving frame. Entering frame. <internalLabel>, edit text, <placeholder text>, Secure Credit Card Frame - Cardholder Frame, group
Safari
Leaving Secure Credit Card Frame - Expiration Frame. Entering Secure Credit Card Frame - Cardholder Name frame. <internalLabel>, edit text, <placeholder text>
Firefox
Nothing. And it's impossible to tab out (or shift+tab out) of the hosted fields to elsewhere on the form. 🙀
Observations
The "leaving frame" and "entering frame" messages are distracting, but it's hard to see what can be done about that.
The title of the iframe (eg Secure Credit Card Frame - Cardholder) is very long when it is read out by a screenreader, and doesn't provide the user with much in the way of additional information. Would it be possible for this to be removed, made an empty string, or made an option that developers can choose?
It would be nice if it worked on Firefox at all, though I understand that may not be within your power at all, like this Safari accessibility problem.
👋 Thanks for bringing this up. This is actively on our radar and we're working to improve it. We'll update here when we have a new release with some fixes for the stuff mentioned here.
Hi @crookedneighbor , it's been 11 months now, has there been any progress with this?
I don't think there's anything we can do about the messaging about leaving or entering the card frames, unfortunately. Though I wonder if you could use the setMessage method in conjunction with the focus and blur events to force a better screen reader message.
I'm working on getting a release out to customize the titles. Sorry for the delay on that, and thanks for the ping.
You can now pass an iframeTitle in the field configuration: https://braintree.github.io/braintree-web/current/module-braintree-web_hosted-fields.html#~field