Does "Drag and Drop" Feature Work for the Accessibility / Vision Disability Guys?

May 24, 2019

Hello, 

I am wondering if the "Drag and Drop" feature works for the vision disability guys as we do have to think about the accessibility issue for this kind of company-wide online courses.

Before, we had some courses tried to accommodate all employees, so we only had limited options when designing quiz, e.g. only multiple choice/responses, true or false, but never tried "drag and drop" or other varieties that really make quiz more interesting and more interactive. So, those courses were very text heavy and lack of interactions. 

Also, any thoughts for the solutions in terms of Accessibility when you have to design a course to accommodate all employees please? How did you balance the interaction and accessibility issue? Is it only an "either / or" issue please?

Thank you very much!

Phoebe 

19 Replies
Susi Miller

Hi Phoebe,

That’s a great question. I have been working on Storyline accessibility for a while, and I’ve found that the multiple response, multiple choice, true or false and text entry quiz slides are accessible for keyboard only users. I have created quizzes and games using these slides, and have used animation paths with the multiple response slide to make them a bit like a drag and drop. I have added two videos below to show you. The game video shows how sometimes you can add two versions of an interaction one for a mouse user and one for a keyboard only user so that you can cater for all of your learners.

I think there is a bug at the moment with the JAWS screen reader and some of the quiz slides which means that the instructions that JAWS reads out to someone who is blind or has low vision, are incorrect. The only ones which work properly with JAWS in the testing that I've done are the multiple response and text entry. I have had a ticket with Storyline open for a long time on this but as far as I'm aware it's still an issue. I'll test it again shortly and let you know.

When I started out I found it quite difficult to know how to make a course accessible. We have new legislation in the UK which means that all public sector eLearning has to be accessible to WCAG 2.1 standards. I have put together an eLearning accessibility hub website at http://www.elahub.net/ which has a lot of useful guidance, links and Storyline examples to help you to make eLearning both accessible and interactive. I hope you'll find this useful and it will prove that accessibility it is not an 'either' or an 'or' issue. If you do find it useful, please share it with all of your colleagues :)

Hope that helps. Thanks

Susi

Phoebe Lu

Hello Susi,

Thank you, I will for sure!!! I just checked the game and the quiz you shared, they are very neat! Before your sharing, I could not imagine people who have the vision impairment can play games, e.g. drag and drop. So I do have hope now that this kind of courses can also be interesting!

One question, I noticed that there is a selection for "mouse user" or "keyboard user" in the game and the quiz as well. I only know the people in my company who have vision disability use the keyboard to navigate the course (my knowledge about that is very limited though. I haven't met the people in person to observe how they take online courses yet. I just saw one of them in a workshop used keyboard to navigate sth then) . So is there an opportunity for them to use mouse as well? What's the consideration for these two options please? 

Thank you very much again!

Phoebe

Susi Miller

Hi Phoebe,

I think maybe it is confusing because of the different impairments people have who use screen readers and the keyboard to navigate.  So hopefully this will explain it.

Some people use screen readers because they are blind or have low vision and cannot see the eLearning. The screen reader will read out all of the elements on the slide and it will also let them navigate through the course by using the keyboard. These people would not be able to use the mouse because they can't see the pointer on the screen, so they use the screen reader and the keyboard to use the course.  I've added another video below which has sound below and shows you how a learner with a visual impairment would hear the game as it is read out by the JAWS screen reader.

There are also people who cannot use a mouse because they have a mobility impairment e.g. they have lost a limb or have a condition like a tremor which means that they can't control the mouse. These people also navigate through the course using the keyboard. They can either just use the tab, arrow and enter keys, or some people with a mobility impairment also use a screen reader to navigate through a course. But these learners can see the screen, so it is important that the game is still visually interesting which is why I have used the motion path to move the objects into the bin.

The game that I posted was from a course which was suitable for all learners. So the mouse option would be for anyone who wanted to use the mouse, but the keyboard option is there for anyone who uses a screen reader or can only use a keyboard to navigate.

I hope that makes sense - but please let me know if I haven't answered your question.

Susi

Phoebe Lu

Hello Susi,

Thank you soooo much for your explanation. It really makes perfect sense!!  

A further question (so sorry, I just want to know more about this issue at one time :-) ), did you branch the Game/quiz into different versions due to the "mouse user" button and the "keyboard user" button selections please? For example, I guess the screen reader will read all texts with "tab" in yellow once the "keyboard user" button is selected. But if the most people select "mouse user" button, it would go to the normal/ default version without highlighted tabs in yellow? Correct?

In a word, did you do anything in the back from the design perspective to differentiate the versions if either "mouse user" button or "keyboard user" button was selected?  Hmm, I only know the screen reader is a downloadable App but I really don't know how it works, So I just cannot help thinking more about this question. 

Thanks a lot in advance.

Phoebe

Susi Miller

Hi Phoebe,

No need to apologise - I'm really happy to help :). The game is from a course which anyone can use, either with a mouse or a keyboard. But if there is an interaction which someone can not use with a mouse e.g. a drag and drop then I give two options, one for mouse users and one for keyboard users. 

On any normal slide in Storyline without an interaction like a drag and drop you can use your keyboard to navigate. You can see this yourself on a published course or in preview mode.

Use the Tab key on your keyboard to jump from one object to the next and use the space bar or enter to select an interaction e.g. a button.

You will see the yellow box jump from one object to the next. To make that work in the correct order you have to set up the tab order yourself -  you can find out how to do this here: https://community.articulate.com/series/74/articles/articulate-storyline-360-user-guide-how-to-customize-tab-order.

If you don't set up the tab order, you will still see the yellow box, but the order of the objects will very probably be wrong.

If you use a mouse instead on a slide, the yellow box doesn't appear - but it is still there in the background if anyone did use the tab key on the keyboard.

So you can make a slide accessible to someone who is using a keyboard to navigate by just making sure the tab order is right and checking it yourself with your own keyboard.

But if you want to make sure that the slide is accessible for someone who is using a screen reader and will  have the objects on the slide read out to them, it is always better to test with a screen reader. In the tab order you can also add the alternative text for images, which you must do for anyone who is blind or has low vision.

If you can I would recommend trying the JAWS screen reader to test your projects as this is the only one which is supported by Articulate.

https://support.freedomscientific.com/Downloads/JAWS

It is quite easy to download, and you can use it in test mode for 40 minutes - although you do have to switch the whole computer down every 40 minutes to keep using it. The licence says it is only for non commercial purposes.

Hope that helps, but no problem at all if you have any more questions.


Susi

Michael Ambech

Hi Susi! really valuable input! Question: I'm currently facing a huge project which MUST be accessible (essentially all projects should be). I'm a big fan of drag and drop, and I saw your workaround in this thread. However, I often use drag and drop with multiple drag AND drop options. How would you design that? So for your example their would be not only a recycle bin but also a normal bin and a bin for bottles etc.

Best regards

Michael

Phoebe Lu

Hello Susi, 

I have recently introduced your feedback to my team and they were very impressed. Thank you once again!

Right now, I am working on one project and have it tested with one vision impaired employee. He has JAWS installed, however, from the first page (course cover) page, only the course title was read, and once he hit "up" and "down", the screen was just still /no response and did not allow him to move anywhere. Therefore, he cannot navigate at all. I went back to the "Tab Order", still cannot find out what the trick was. I attached the first two pages here, would you please do me a big favour to see what the problem was? BTW, he used IE instead of Chrome, but I guess it should not impact the navigation on tabs.

Do you have any thoughts please?!

Thank you very much in advance!

Phoebe

Jeff Momsen

This is so great. We are going through our WCAG compliance list too, and I was considering alternative question styles for drag and drop assessment questions!

Thanks for sharing this.

Since Storyline only counts one quiz for completion status, have you given any thought to how to properly score based on the users choice of which method to complete?

Phoebe Lu

Just give you all some updates if you are still interested in this topic. :-0

Storyline Support has helped me spot the problem. There is no error in my course per se and suggested I have to go back to the targeted learner to check the settings on his computer.

Below are the suggestions from the Support, You may also want to give it a try if you cannot figure out what the problem really is just like me:

1.) Make sure the JAWS has the latest updates.

2.) Make sure the computer has the latest updates.

3.) Clear your browser's cache.

This time, I am so amazed by the efficiency from Articulate Support as always!   

Chino N. (If It is ok to credit him here  :-) ) from the support group provided me with super informative and detailed videos to help me out all the way through. 

Thank you very much once again!!!

bobby garcia

Susi,

I greatly appreciate all that you've contributed - certainly a valued asset. Question: Would you be able to share the Storyline file for the Accessible game? If not, I understand.

Also, you mentioned making two versions (as in the Accessible game) for an interaction but my concern is, just that, having to make two versions. Before I try myself, I wanted to ask if Storyline will allow functionality for both versions in one slide. Meaning, triggering an item to be either clicked/dragged (using mouse) OR selected (Tab then Enter using keyboard) in the same instance.

Respectfully,

/bobby garcia

 

Susi Miller

Hello Bobby, I'd be more than happy to do that - the only problem is that it might take me a while as I need to extract it from the rest of the course. In the meantime the inspiration for the game was from the fantastic Terry Springer.

https://community.articulate.com/discussions/articulate-storyline/keyboard-accessible-drag-drop

If you look at this thread he shares his source files at the beginning which show you the animation paths, triggers and variables that you need to use. The only difference with the one I designed is that in mine the objects have a hidden state when they reach the end of the animation path which makes them seem to disappear into the bin. I remember it took me a while to understand how he had made the objects reappear if someone changes their mind and deselects the check box but I think that was the only really fiddly thing. 

It's a good question about the functionality in one slide. I don't think that would be possible but maybe someone from Articulate might be able to help. One answer would be to provide the accessible version for everyone. I know the format for the game version is different, but essentially it is still checking the same information so you could just provide that version for everyone.  That's what inclusive design would do :)



Susi Miller

Hi Jeff, thanks so much though it's the fantastic Terry Springer you should really be thanking :)

https://community.articulate.com/discussions/articulate-storyline/keyboard-accessible-drag-drop

That's a great question about the scoring - my project wasn't being tracked as it was just awareness raising. Maybe someone from Articulate could help?

This discussion is closed. You can start a new discussion or contact Articulate Support.