E-Learning Heroes Challenge 466: Dragon Drop
Alright, it’s a new week so there is a new e-Learning Heroes Challenge to build in Articulate Storyline. This week’s challenge was to:
Share a before-after example that reworks a short project to make it more accessible.
You can check out my entry below:
Drag-and-drops are notorious for being inaccessible activities because they require users to click on an object and hold the click while dragging their cursor to a particular spot on the screen and dropping it in place. These activities are inaccessible to blind users, who cannot use a computer mouse because they cannot see where the cursor is at any point in time, and individuals with motor disabilities.
The WCAG components I wanted to address with this activity are:
WCAG 2.1.1: Keyboard - All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
WCAG 2.5.7: Dragging Movements - All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.
In addition to making the activity accessible, I wanted to make it universal as well. For users accustomed to drag-and-drop activities, I wanted them to experience it in the way they were familiar with. To do this, I needed to make sure that the “Dragon Drop” activity utilized both the traditional drag-and-drop functionality and an alternative method that worked with either keyboard navigation or other assistive technology devices (such as a Sip and Puff).
To accomplish this goal, I had to create four states for each dragon (Normal, Selected, Drop Correct, and Drop Incorrect), nine motion paths (each dragon going to each bedding option), and about forty triggers. Most users would click the dragon to change it to the Selected state to get the hint and drag it to the correct location. When it was dropped in its spot, it would change to either its Drop Correct or Drop Incorrect state, which look identical. When they select the Submit button, they’ll be directed to the Correct layer if the state of all of the dragons is Drop Correct. If the state of at least one dragon is Drop Incorrect, they’ll go to a Try Again layer, which provides a hint and adjusts a Second Attempt variable to True. Missing the question again will take them to the Incorrect layer and provide them with the correct answer.
Individuals using keyboard navigation can use the Tab key to navigate to the dragon and the Enter key to select it. This will put the dragon in the Select state (only one dragon can be selected at a time). From there, they tab to the bedding location and hit Enter. Hitting Enter on a bedding option with a dragon selected will move that dragon along the motion path sending it to that spot. A trigger will change the state of the dragon to Drop Correct or Drop Incorrect when the dragon intersects with a bedding location. The user completes that process until all of the dragons have been moved to a bedding option. From there, the activity works the same as it does for those using the drag-and-drop functionality. The process works the same for those using Sip and Puffs, except they won’t need to tab to the dragons or bedding options.
You can view a demo of the Dragon Drop activity below: