Screen Reader Accessibility for Button States

Apr 21, 2017

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
Ren Gomez

Hi Everyone,

Thank you all for continuing to share the crucial need for creating accessible content for all learners. While more work remains, we're at a point where we're confident the work done so far delivers meaningful real-world improvements for learners with accessibility needs. I've included links below where you can find all the details on what this means for Storyline 360 Update 36:

You'll also find our general FAQ on accessibility in Articulate 360 tools here.

This release makes it significantly easier for those users to perceive, operate, and understand content published with Storyline, while opening up more choices of browser, assistive technology, and devices for the first time. Learners will benefit from the vast majority of these improvements, even when the course author is not designing their course for accessibility. 

If you have any questions or concerns, let us know here or reach out to our Support team. We know there is more to do, so we'll continue to keep you posted about future releases.

Jackie Waskewicz

Hi Susan, we are experiencing the same issue and opened a case. JAWS reads any custom state we create and apply alt text to, but it does not read the alt text of the built-in state (aside from the normal state). So if we use the Visited state, add alt text, apply a trigger to change it to visited once clicked, tab to trigger it, tab back and only the normal state alt text reads. However the same steps work successfully for custom states.

Ren Gomez

Hi Jackie,

I'm sorry you're running into this! Thanks for jumping in here as well and letting us know this is still an open issue. It looks like my teammate, Lauren, let you know this is a bug that we have logged and are keeping it on our radar.

We'll be sure to let everyone know when any progress has been made.

Vincent Scoma

Hi Everyone,

I have good news!

I am happy to share that we just released the newest version of Storyline 360 Build 3.37.21453.0, which fixed the issue where screen readers would only read the normal state of an object.

The next step is to update Storyline 360 by heading to your Articulate 360 desktop app and clicking "Update" next to Storyline 360. 

As always, we are happy to answer any questions you have by posting in this discussion, or you can contact our Support Engineers directly.

Lauren Connelly

Hi Ludovic!

I've noticed the same issue that you mentioned! The state isn't read off when the button changes to the visited state. We've logged this as a bug so that our Engineering team can begin investigating.

I'm so sorry this is affecting your course! I'll link this discussion to the report and we'll make sure to post in this thread when we have a fix.

Lauren Connelly

Hi everyone!

I just wanted to share that we've released more accessibility enhancements today in Storyline 360 Update 41 (Build 3.41.22450.0)! 

You can see all the fixes and feature released here! Thank you everyone for taking the time to address these bugs. It's always exciting to release a fix.

Ren Gomez

Hi Shim,

Happy to help clarify here. Different states of an object aren't included in the Focus Order since screen readers automatically announce states for interactive objects. This article shares more:

Interactive objects are correctly identified to assistive technologies and function as expected. For example, screen readers properly announce radio buttons with their labels and current states.

Can you share more about what questions you have on layer objects? You'll notice they appear on the focus order and are read by a screen reader when the layer is visited.

shim z

I am working on a course to make it accessible.
I am adjusting focus order now for the screen readers.
I made my learning outcomes with button states. When the learner selects
button(Outcome 1) the text would appear.
So, my question is that I was looking at focus order where I didn't find my
text of learning outcomes. So I am really confused, Should it be there or
not? How will the screen reader find it?
HELP! See the attached screenshot.

Susan Nabonne Beck

Hi Lauren and Shim,

Two things... 

I believe Shim is asking where he can edit the alt text for states of a text box and/or shape. I believe the answer is that Storyline does not have that feature yet. But is much needed to make it fully accessible.

As for screen readers and text boxes, you do often have to add or edit the alt text for text boxes. For example, you may need to add statements such as "bulleted list with 4 items" or space out acronyms so they are not read like a word. You also may need to remove special characters that you do not want read by a screen reader.

Maria Costa-Stienstra

Hi, Shim.

As Lauren explained before, the onscreen text doesn't need alt text. 

Susan also brought up the subject of alt text for different states. This can be accomplished through the Size and Position window when editing the different states:

Let me know if this helps!

Susan Nabonne Beck

I am happy to learn that you can edit the alt text for states using the Edit States feature then the Accessibility window. This will be very helpful! My question is does SL automatically include a state with screen readers? I use Jaws and from what i can tell it does not.