Screen Reader Accessibility for Button States

Hi there,

I'm having some trouble implementing accessibility for my Pick Many activities. Screen readers do not seem to recognize the difference between a Normal state and a Selected state of a button

I have a multiple choice question where the user can select more than one answer. I've made Normal state alt texts (Option 1, Option 2, Option 3, Option 4) and I've made Selected state alt texts (Option 1 Selected, Option 2 Selected, Option 3 Selected, Option 4 Selected). This way, a visually impaired user can know which answers he/she has already chosen before selecting the Next/Submit button.

It doesn't work though and the screen reader just reads the normal alt texts. Is there a solution around this? Thanks!

4 Replies
Alyssa Gomez

Hi there Ria,

Thanks so much for letting us know what's going on. Are you using Storyline 360? We do have an issue on our radar where changing the Alt Text within states retains the original Alt Text for JAWS. I'm really sorry this is giving you headaches, and I'm glad you reached out. Knowing how many people this affects really helps us prioritize issues.

For now, try using shapes instead of buttons. For example, insert a rounded rectangle, and style it to look similar to the buttons you have already created. Add Alt Text to both the Normal and Selected states, and you should be good to go. 

I hope this helps, and please reach out if you need any more help!

Matthew Bibby

Hi Alyssa,

Using shapes doesn't make any difference, the alt text of states is still being ignored in nearly all cases.

See here for a demo of JAWS and custom shape alt text.

The only way that I've been able to get the screen reader to pick up on alt text of states is by cutting the object out of the state and then pasting it back again. This way, it is picked up by JAWS, however, JAWS also sees the normal state so we end up getting two announcements for the same button when the selected state is visible. See here for a demo.

mat corrado

Hi Ria and Matthew,

As Alyssa mentioned, there is a bug on QA's radar about JAWS not narrating objects' states accurately.  I'm sorry it's creating problems for both of you!  I'd like to help each of you come up with the best workaround for your specific situations.  Any chance you can attach your .story files to this thread?  Or, you can create a case here, and be sure to include your .story files.

Thanks for your patience!

Matthew Bibby

Hi Mat,

Thanks. This is not just an issue for one project, but an issue for everything that I build as the majority of my courses need to be accessible. 

While I can workaround this issue sometimes by using multiple buttons (rather than button states), it leads to a lot of additional development and less than ideal outcomes in some cases. 

Are there any other workarounds that I might be able to use?

I'm glad QA are aware. I really look forward to seeing this bug get fixed!