Issues retrofitting accessibility functions to a former Drag and Drop exercise

Hi all,

I'm currently in the process of updating an old ELH Challenge demo to make it more accessible, by offering a Pick One activity as an alternative to a Drag and Drop. 

I have transplanted the design into a Pick One template and recreated the Drag and Drop action using motion paths.  But I am now having trouble selecting these items from the keyboard using the tab key, despite ensuring they are 'visible to accessibilty tools' and customising the Tab Order, as below:


As you can see below, the tab key is not picking up B or C and when I hit enter on A, nothing happens.

Yet if I click on A, B or C using a mouse, or use a Key Press trigger, it performs as intended:

The curious thing is, on an blank Pick One template the tab key is picking up all three answers, as below:

My software is up to date.  I have also tried importing the offending slides into a new Storyline project, but I still get the same issue.

Is it possible that some code from the Drag and Drop is hanging around and corrupting my Pick One activity?  Am I missing something here?  Or do I need to rebuild my slides from scratch to ensure these objects can be accessed from the keyboard?  (Please tell me there's a workaround!)

Any help or advice gratefully received.

Jon

** UPDATE **

I seem to have resolved this by using hotspots to select the items instead, but I would appreciate any pointers on why this issue arose in the first place and how to avoid it in future.

 

7 Replies
Katie Riggio

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. 

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.

Jonathan Hill

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.

 

Katie Riggio

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:

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

1

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  2. 3

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!

Jonathan Hill

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?

 

Katie Riggio

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!