Screen Reader Accessibility for Button States

Apr 21, 2017

Ria Fernandez
By Ria Fernandez

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!

89 Replies
Alyssa Gomez
almost 7 years ago04/24/17 at 5:31 pm (UTC)

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!

mat corrado
almost 7 years ago04/25/17 at 1:23 pm (UTC)

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!

Ameba Aaa
over 6 years ago08/25/17 at 12:26 pm (UTC)

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?

Ameba Aaa
over 6 years ago08/25/17 at 1:59 pm (UTC)

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").

Ameba Aaa
over 6 years ago08/25/17 at 4:21 pm (UTC)

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? 

Ashley Terwilliger-Pollard
over 6 years ago08/28/17 at 8:15 pm (UTC)

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? 

Ameba Aaa
over 6 years ago09/07/17 at 2:58 pm (UTC)

Sorry, maybe there was a misunderstanding, because the problem fixed is concerning JAWS and notes (https://community.articulate.com/discussions/articulate-storyline/screenreader-not-reading-notes-in-player#reply-458625). Actually, I published right now (update installed) an example course with two slides: the first one with multiple choice quiz and the second one with radio buttons; there is still the problem in html5 (not in flash reading correctly). Also on radio buttons, JAWS says "to change the selection press up or down arrow", but you can use only the space bar to select a radio button.

Kara Campbell
6 years ago02/09/18 at 1:18 pm (UTC)

Hi Ashley, I am having the same issue as Ameba:

"Also on radio buttons, JAWS says "to change the selection press up or down arrow", but you can use only the space bar to select a radio button."

Do you know if this will be fixed or if there is a current work around for this issue? Thanks.

Raf Dolanowski
6 years ago03/06/18 at 2:54 am (UTC)

Is there any further update on this?

I just updated my Storyline to the latest but am still seeing the issue with "not selected" being read by JAWS, even when it is selected.

Also there is nothing being read out to indicate states for shape buttons, native buttons, checkboxes or radio buttons. Both in the cases of them being independent or grouped into a button set.

Looking forward to hearing an update.

Testing in latest IE, HTML5 export using latest JAWS and Thunder.

Alyssa Gomez
6 years ago03/07/18 at 4:52 pm (UTC)

Hi Raf,

Thanks so much for chiming in. First, have a look at a screen recording of my testing in Internet Explorer 11.

In that recording, you see that JAWS announced "radio button checked" when you tab back to a selected radio button. 

Our output doesn't support a "real time" change in the state of a radio button. In other words, JAWS doesn't read "Radio button selected" as soon as a user selects it in any version of Storyline.  So, it's expected that you would have to tab back to a selected radio button to hear that's it's checked.

Now, let's talk about object states. We are seeing a problem in Storyline 360 where JAWS does not announce Alt Text on an object's states, and we're working to fix this problem. Does that sound similar to the issue you're seeing in your file? 

Raf Dolanowski
6 years ago03/07/18 at 8:14 pm (UTC)

Hi Alyssa,

What version of Storyline did you use to create that export in your video?

As the behaviour you are showing and what I am seeing are not the same. My radio buttons always say "not selected" regardless of setup, screenreader or browser.

Glad to hear the bug with the object states is also being addressed.

Looking forward to that update, as I primary create custom buttons rather than using the native assets.

Cheers,

Wenqing Ma
6 years ago03/12/18 at 2:50 pm (UTC)

Hi, Alyssa

Your video says for first distracter: "Think about the learner. Don't set up your questions as "gotcha" questions. radio button not checked. To change the selection, press up/down arrow."

The issue is when follow the instruction to press up/down arrow, the user can't change the selection status of the distracter. Instead, user could press space bar to change the selection.

So, the fix would be let JAWS read "....To change the selection, press space bar"

or

fix the up/down arrow and let up/down arrow execute the radio button selection.

Wondering if this issue has been fixed?

Thank you.

Wenqing

Sign In to Reply