Accessible version of a complicated drag-and-drop
Oct 23, 2020
I have a complicated drag and drop question that I need to retrofit to make it accessible for keyboard use. Here is the situation: John, Kristy, and Edward are potential team members. All need to be selected to see correct layer. When John is dropped, there is a layer about why he is a good choice but no correct or incorrect layer should be triggered until submit is pressed. Same for Kristy and Edward - as they are dropped, a layer about them needs to show. Continue buttons are on each of the people layers that allows user to select other people. To summarize:
1. 3 potential drag items that all need to be moved to the same (only) drop location. (It is essentially a "pick all 3" question.)
2. I am using a submit button. Correct layer shows when all 3 drags have been dropped and submitted. Incorrect layer shows if one or two but not all three drags have been dropped when submitted.
3. Here is the part that has me hung up - A feedback layer explaining why each drag is correct has to show when it is dropped on the drop.
Many thanks for any advice.
5 Replies
Hi Christine,
In the attached example, I have used three of the Content Library characters as your three potential team members. I have added a True/False variable for each character, which changes to True when they are dropped on the target (the office). I have added individual layers for each character that are shown when the character is dropped on the target. I have also added a Continue button and a Submit button (which sits directly under the Continue button) to each layer. The Submit button has an initial state of Hidden.
Once all three characters have been dropped on the target in any order, the Continue button on the final layer to appear is Hidden and the Submit button is changed to Normal. When the Submit button is clicked, the Drag and Drop in submitted and the Correct layer appears. Clicking on the Continue button then jumps the user to the next slide.
Hope this helps, but if you have any further queries, just get back to me here.
Thank you so much. I fought with this for an entire day. The submit button having an initial state of HIDDEN might be one of the secrets! I am anxious to try this and then check it with NVDA and keyboard shorts after adjusting tab order.
Alas - it "works" but only with a mouse. Keyboard only has no drag option, which means the drag and drop can't be activated and the question is not being scored. We are using xAPI to capture scoring data, so this is an important piece. TIA for any ideas.
Hi Christine,
In the attached modification to your file I have created a keyboard-driven drag and drop option that may solve your problem.
I have added motion paths for each character and their associated text boxes that activate when the user clicks J for John, K for Kristy or E for Edward (instructions also added in bold below characters). I haven't done anything to close the layers because I assume you already have a way to do that (presumably tabbing to the button and clicking the Return key, or something similar).
I have also added additional triggers to show the appropriate layers when the animation paths complete for each of the characters.
Hope this helps, but just get back to me if you have any other queries.
Thank you, Ned. I truly appreciate your help.
This discussion is closed. You can start a new discussion or contact Articulate Support.