Forum Discussion
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!
Hi, Cristina. Thanks for checking in!
While I don't have an update on this problem just yet, we promise to keep this discussion updated as soon as new information is available.
Thanks for bearing with us, and let us know if we can be of any other help!
- JackieWaskew168Community Member
Hi Yuna,
Do you mean a multiple response or select all that apply type question? By selecting that question type (or creating one), Storyline allows the keyboard user to select multiple answers, just like a person using the mouse (only difference is their click to select comes from a keyboard click). Our team likes to add alt text before a question like this to let a learner get some context surrounding the question (question type, number of answer, etc.). I've attached a quick video that shows what I mean (sorry for the audio quality with JAWS, but this should give you an idea). This is a plain Multiple Response type graded question.
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!
- matcorradoCommunity Member
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!
- AmebaAaaCommunity Member
Hi all,
I have a similar problem for checkboxes: the screen reader cannot read the selected status of checkboxes. If I try this workaround, the box is not shown selected, futhermore the text in selected status is overlying the normal status.
What can I do to make readble the selected status, without creating multiple checkboxes and textboxes handled with triggers?- AmebaAaaCommunity Member
I found out the reason!
First all I updated to the last version of SL360. Then changed the alt text in the selected status.
In order to listen the selected status, when checkbox is selected, you have to wait for Screen reader to read the entire sentence: i.e. checkbox contains the text "hello", so screen reader will tell "hello checkbox" and then you can select the box and listen the phrase wrote in the alt text of selected status (for example "hello selected checkbox").
Thanks for chiming in with an update Ameba :)
Welcome to E-Learning Heroes!
- AmebaAaaCommunity Member
Sorry! But things seems to work randomly. I added a new Survey Question slide, pick many, but the state selected is not recognized by Jaws. It always read as not selected checkbox :(
I did a try with Chrome Vox extension for Google Chrome and for the first slide it works, but not yet in the second one with multiple choices. I know that just JAWS is compatible, but I wanted try anyway.
Is there something else to do?
Oh no Ameba!
Are you utilizing the latest version of JAWS within IE? Interesting that it's working randomly for you though. Is it any course or just the one you are working with now?
- AmebaAaaCommunity Member
I'm using JAWS 18 with Firefox/Chrome (v. 60)/IE 11, just on my course. The status of selected choice (both in pick one and pick many template) remains "unchecked" for JAWS.
- AmebaAaaCommunity Member
Also, only on Google Chrome if you navigate with TAB key and go on the first voice of multiple choices, just for the first time, jaws reads two times every choice from bottom to top and then the voice selected with TAB. This strange behavior doesn't happen with Firefox and IE11.
Hi Ameba,
JAWS only supports the latest version of IE, so I can see that being a part of why it's not working in Chrome/Firefox.
I'd love to have our team take a look at your project so we can see how it's working in IE11 though. As Mat mentioned earlier in this discussion we have some issues reported to our team, so the more examples of it the better! Can you share a copy of the .story file with our Support team here?
- AmebaAaaCommunity Member
Thank you Ashley, I shared my file with the support team