Issues retrofitting accessibility functions to a former Drag and Drop exercise

Hello Jonathan,

Thank you for the thoughtful post and neat design! 🌌

I'm glad you found a fix, and I'm happy to look into what happened. You took the right steps by checking the Object is visible to accessibility tools option and adding the choices to the Tab Order.

Tab key not picking up all choices: The article below covers how navigation works for slides with button sets, including freeform pick-one interactions. You'll want to use the screen reader's navigation keys (e.g., Down and Up arrows) to move through the slide content, including the answer choices. 

• How to Navigate Multiple Choice Questions with a Screen Reader or Keyboard

Nothing happens when pressing Enter: Is there a Submit button on this slide? If so, does the yellow accessibility box appear around it?

If you can share the affected version of this slide, that would be gold! Simply attach the file to our public chat by using the Add Attachment button in your reply.

Thanks Katie.

In this design I have removed the SUBMIT button to improve the flow of the interaction, instead using a 'Submit Interaction' trigger when any one of the three answers is selected.

For context, this is how the design should look and perform: https://bit.ly/elhc262c 

When the first question loads you are given the choice between a Drag or Click activity.  This issue affects the 'Click' side of the game.  In the live version I have used the 'hotspot fix' shown in my original post to ensure that all three answers are accessible from the keyboard via the tab key.  

I've also attached two versions of the affected slide; one that uses hotspots and one that does not.  In the latter, only the correct answer can be selected via the tab key, although nothing happens when I hit enter.  

At a guess, could the lack of a submit button and the way I have constructed the images for each answer be the cause of this?  It's interesting that hotspots resolve the issue, as I was always led to believe (perhaps wrongly) that hotspots were not accessible.

Hi Jonathan,

Thank you for the opportunity to test both slides!

Quick Background: In courses created before Update 36, tabbing was based on the Tab Order. With the accessible player's debut in Update 36, you no longer need to tab through the entire content. Instead, you can use the screen reader's navigation keys (e.g. the arrow keys) to move through content, including the answer choices. 

First Slide: Hotspots are now keyboard-accessible, so learners can activate them without using a mouse. Because they are interactive elements, you can tab through them.

Here's a great resource that lists all the latest enhancements to make slide content more accessible:

• Storyline 360: Slide Content Is More Accessible

Second Slide: In this Pick One design, using the arrow keys to cycle through the different answer choices actively satisfies this trigger:

Unfortunately, there isn't a way to have both the key press and mouse choice click option work for this design. Your hotspot approach is a perfect solution. 🌟

If you're curious, here are the tweaks to make this interaction work with just keyboard navigation:

1. For each answer choice, change their respective move triggers to happen when users press the Enter key on the condition that each choice is selected
2. Set the interaction to submit when learners press the Enter key on the condition that each choice is selected

For example:

1.   2. 

I'm attaching a modified version of the second slide that is keyboard accessible. Also, here's a quick recording of the slide in play.

Let me know if that helps!

Thanks Katie, that's really helpful and very clear. I hadn't fully appreciated the effect of Update 36 and the use of the arrow keys to access all of the answer options.

I notice in your video only Answer C (the correct answer) was accessed from the tab key, then you used the arrow keys to change the selection.

Will the tab key always jump to the correct answer first? Potentially giving away the answer?

Hi Jonathan,

Glad that helped, and that you're exploring all the latest accessibility enhancements!

Now, the tab order that you define for each slide in Storyline 360 controls the reading order for screen readers as well as the navigation order of interactive elements.

In the slide above, answer choice C (the correct answer) is the first interactive object in its section listed in the tab order. That means when learners tab to this part, the yellow accessibility box will appear on answer choice C.

To change this, simply use the Up/Down arrows in the lower right corner to move the answer to a new location in the list. Check out this short recording!

This is great Katie, many thanks.

For anyone interested in how the updated version of this demo performs, you can at it here:

https://bit.ly/elhc262c

With thanks again to Eileen Fernandez-Parker, who first queried if this demo could be made more accessible, and to Katie Riggio for her help getting it there.