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
Birgit Muehlenhaus
6 years ago04/05/18 at 3:05 pm (UTC)

Hi Alyssa,

I'm wondering if my issue is related to what has been discussed in this thread.  I have two radio buttons, both with Alt text in my Storyline 360 file.

The first radio button in the tab order (CC on) is UNCHECKED and the screen reader (both JAWS and NVDA) announce the following:  Radio button 2 radio button not checked.

The second radio button in the tab order (CC off) is CHECKED and the screen readers announce: CC off button radio button checked.

If I select the CC On button and deselect the CC Off button, then the announcements are reversed:

CC On CHECKED: CC on button radion button checked

CC Off UNCHECKED: Radio button 2 radio button not checked

I tested this with 3 web browsers: Google Chrome, IE and Edge and with screen readers NVDA version 2018.1.1 and JAWS 2018.

Is this similar to the issue mentioned above or is this another issue altogether?  Thanks for any help!!!

I have attached my Storyline file here if that helps.

Ashley Terwilliger-Pollard
6 years ago04/06/18 at 4:41 pm (UTC)

Hi Birgit,

I've read this a few times, and I wanted to confirm exactly what you're expecting. It sounds like you'd want JAWS to read:

CC On CHECKED: CC on button radio button checked

CC Off UNCHECKED:  CC off button radio button not checked

Is that correct? That the CC off button isn't recognized as the right name of the button?

Birgit Muehlenhaus
6 years ago04/06/18 at 5:16 pm (UTC)

Hi Ashley,

Yes, I would expect that whether or not the radio button is checked, that JAWS would announce the alt-text of the button (CC On button or CC Off button).  So when the CC Off button is UNCHECKED, it's correct name is not recognized (it's recognized as "Radio button 2").

Does that make sense?

Thanks!

Birgit

Ashley Terwilliger-Pollard
6 years ago04/09/18 at 8:20 pm (UTC)

Thanks Birgit - that does make sense, and I saw the same thing while testing out your file too.

I tried recreating the issue on a new file, attached for you here. You'll see I set up my radio buttons a bit differently to test a few things, but they both have the Alt text enabled. The CC on button is animating in similar to yours, and the CC off button also had it's "Radio button" title in the timeline renamed to match the alt text.

I uploaded this to Tempshare for some quick testing, and viewed in Chrome HTML5 with Jaws 18 - and both of them noted the correct alt text when selected and when not selected.

Can you take a look at my example and let me know how it behaves for you? I'd like to narrow down what could be causing it...I didn't add in your triggers as I don't think that should have an impact but let me know if you spot something else!

Arin O'Boyle
over 5 years ago09/20/18 at 9:36 pm (UTC)

Hello, We had 30+ training modules in Rise, and I am in the process of learning Storyline to transfer them to Storyline for Accessibility purposes-

I am trying to make sure I am up to speed on everything in Storyline that is Accessible/508 Compliant, and where there are bugs/issues that I should be aware of on the front end until we are able to get a screen reader to check our modules as we go-

Has this issue in this thread regarding Ria's question been resolved? Just wondering as I am making a list and I didn't see a final comment, but I wasn't sure if that was typical or not and I just wanted to check, thank you!

Alyssa Gomez
over 5 years ago09/21/18 at 5:06 pm (UTC)

Hi there, Arin!

I recently responded to your post in this other discussion, so be sure to check out the information I shared there!

This discussion is about a different bug. When you select an answer on a quiz question slide in Storyline, JAWS will say, "To change the selection, press Up or Down Arrow." However, this doesn't work. You actually have to press the Tab key to change the selection.

This bug has been a tough one for us to nail down, but we're still looking into it. You're in the right place to stay up-to-date on our progress!

Ashley Terwilliger-Pollard
over 5 years ago10/19/18 at 1:50 pm (UTC)

Hi Meagan, 

Our team is still looking at the issue where JAWS doesn't read the alt text from Tab Order for objects with multiple states.

In the meantime, there are a few workarounds you could use:

  • Manually change the alternate text of the states. (Edit state > Righ click object for each state > Size and position > Accessibility)
  • Modify the alt text in the Tab Oder before adding a state to the object.

We'll let you know here as soon as we have additional updates!

Ashley Bricker
over 5 years ago10/31/18 at 4:49 pm (UTC)

Hi Ashley,

We have tried the work arounds stated above and neither work with JAWS, NVDA or VoiceOver. The alternate states do not read, even when additional alt text is added. The alt text on a state does not show in the tab order, either. Adding an additional shape on top and using a trigger/variable to set it (say, as a visited state) would work, but would also make tabbing through with JAWS (or any screen reader), a pain because there is no way to prevent the initial state from being read. Just wanted to share what we are experiencing.

 

Jason Cunningham
over 5 years ago01/09/19 at 9:40 pm (UTC)

If it is of any help, I've done many revisions with existing Storyline files over the past few months. I've noticed that if the object used customized states, that new state's alt text is read correctly. If it is a "native" state from Storyline, like "Selected" or "Visited", JAWS will ignore that state's alt text, and instead read what is found on the "Normal" state alt text. Due to interacting with the course to reveal information, I like to have alt text that indicates the user interacted with an object. 

Ashley, are you suggesting to add alt text in the Tab Order window first, instead of "right-click"/Accessibility on each shape? Would that affect the alt text I readback for "Selected" or "Visited" states? 

If you would like to see source files, I may be able to supply something.

Leslie McKerchie
over 5 years ago01/10/19 at 2:57 pm (UTC)

Hello Jason and welcome to E-Learning Heroes :)

Thank you so much for popping in to share your related findings. I'm adding them to the report as we continue investigating.

As for Ashley's suggestions, those were possible workarounds identified by our team. If you'd rather use the built-in states, you could certainly try it out, but it sounds like you're onto a good solution that's working well for you.

Sam Hill
over 4 years ago09/06/19 at 12:41 am (UTC)

Confirming other peoples findings. Custom states with different ALT text defined will be read by the screen reader (I'm using JAWS). Storyline defined states, for example "Disabled","Selected" etc will just read the ALT defined on "Normal" state.

Creating a custom state such as "_disabled" will allow you to define an ALT of "xxx disabled" but then you lose built in features, such as setting a button to "Disabled" stops the button triggers being executed.

This issue has been around for so long looking at this forum post. The software might be able to claim compliance, but issues like this one are significant. Create a button group of 6 buttons, and  you have no way of letting a screen reader know which buttons are selected and not selected unless you use a custom "_selected" state. 

I put together a quick test using JAWS and just demonstrating the states.

Lauren Connelly
over 4 years ago09/10/19 at 12:38 pm (UTC)

Hello Sam!

Thank you for sharing your findings with us! We appreciate hearing the multiple ways this feature could elevate courses and your learners experience. This is an issue that we've been looking into for awhile, like you mentioned.

We are dedicated to making it a simpler task to author accessible courses using Storyline. When we hear of any new updates, we'll report back. As of now, here is what we are working on!

Jackie Waskewicz
over 4 years ago10/15/19 at 4:02 pm (UTC)

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.

Katie Riggio
over 4 years ago11/19/19 at 2:49 pm (UTC)

Great news, everyone!

To circle back on Ashley's post, I'm excited to share that we just released Update 34 for Storyline 360. It addresses the issue where JAWS did not read the alt text from Tab Order for objects with multiple states.

To see all the enhancements this version has to offer, follow these steps to update your software. Please let us know what you think!

Sign In to Reply