Build an Accessible Drag and Drop Interaction in Storyline
If you've ever needed to build an accessible course in Storyline, you may know that the built in drag and drop interactions are not accessible (see the VPAT). However, with some extra work it is possible to create your own drag and drop interaction in Storyline that is fully accessible. The issue with drag and drop interactions and accessibility is that people who access the computer using only a keyboard or assistive input device, and no mouse, cannot click-and-drag. So, the interaction must have another option, that works through the use of keyboard inputs (typically, the tab and enter keys). In Storyline triggers, anything that is done "on click" can be mimicked by a keyboard or other input device. To build a keyboard-accessible drag and drop requires building a second set of triggers that function using click-based rather than drag-based interactions. Here is how to build your own keyboard accessible drag and drop interaction in Storyline. Please note that you may include other elements that are not fully accessible. Take a look at the WCAG Guidelines to evaluate other aspects of your course creation This interaction relies on a user-selected submit button. This button needs to be on the slide, as the triggers used are not compatible with the built-in submit button in the Storyline player. Note: It will be easiest to create all layers, elements, and states before creating the triggers. LAYERS NEEDED Base Layer – Most of the triggers will be on the base layer. Correct – A feedback layer for when the user submits the interaction, when all items have been moved to the correct drop location. Incorrect – A feedback layer for when the user submits the interaction, when the interaction is incomplete or some items have been moved to the wrong location on the screen. BASE LAYER Elements Needed Drag items – one or more Drop targets – one or more Submit button – one Drag Item States Normal - The built in state. This does not need to be modified. Selected - Create a “Selected” state. Make sure to edit the selected state to include a visual indicator that the item is selected. An easy way to do this is to add a “glow” shape effect in a color contrasting the object. Drop Correct - Create the “Drop Correct” state. You may want to visually signal that the drop was completed. One way to do this is to darken or desaturate the object in the “drop correct” state. Drop Incorrect - Create the “Drop Incorrect” state. Make this state visually identical to the Drop Correct state. Triggers Submit Button 1. Show layer Correct when user clicks If Drag item 1 state equals Drop correct And Drag item 2 state equals Drop correct … (Continue through the rest of the drag items) 2. Show layer Incorrect when user clicks If Drag item 1 state does not equal Drop correct Or Drag item 2 state does not equal Drop correct … (Continue through the rest of the drag items) Drag Items For each drag item: 1. Change the item’s state to Drop Correct when it is dropped on the right drop target Change state of Drag Item 1 to Drop Correct when user drops Drag Item 1 on Drop Target 1 2. “Deselect” all other drag items when this drag item is selected (Change other drag items’ states to Normal, if they are currently selected) Change state of Drag Item 2 to Normal when user clicks Drag Item 1 If Drag Item 2 state is equal to Selected Change state of Drag Item 3 to Normal when user clicks Drag Item 1 If Drag Item 3 state is equal to Selected … (add this trigger for all other drag items on screen) 3. Change the item’s state to Drop Incorrect when it is dropped the wrong drop target(s) Change state of Drag Item 1 to Drop Incorrect when user drops Drag Item 1 on either Drop Target 2 or Drop Target 3 … (include all incorrect drop targets in the list) Drop Targets For each drop target: 1. Move the selected Drag Item along a motion path to the Drop Target when the user selects the drop target. NOTE: The move triggers MUST be before the state change triggers in the list Move Drag Item 1 on Motion Path* when the user clicks Drop Target 1 If Drag Item 1 state is equal to Selected * For the motion path, create a line motion path with start and end points in the center of the drop target. This will move the object to the correct location without showing movement on screen. Make sure to go into the path options and select “locked” for origin. This will ensure that no matter where on the slide the object starts from, it will move to the correct position with the trigger. Name the motion path something descriptive so you can identify it in the trigger list (ex: Drag 1 to Drop 1 Path). NOTE: When you create a motion path, Storyline automatically adds a trigger to the object to follow the motion path when the slide timeline starts. Make sure to go in and remove all of these triggers. … Make this trigger for all drag items on the slide. 2. Change the state of the corresponding Drag Item to Drop Correct, if the Drag Item is selected Change State of Drag Item 1 to Drop Correct when the user clicks Drop Item 1 if Drag Item 1 state is equal to Selected 3. Change state of the selected drag item to Drop Incorrect for all drag items that do not match with this drop target Change State of Drag Item 2 to Drop Incorrect when the user clicks Drop Item 1 if Drag Item 2 state is equal to Selected … Make this trigger for all remaining drag objects on the slide. CORRECT LAYER Elements Text box(es) Continue button Triggers Continue button Jump to next slide INCORRECT LAYER Elements Text box(es) Try Again button Triggers Try Again button Jump to slide (current slide) – this restarts the interaction on the slide base layer NOTE: Make sure the slide is set to “Reset to initial state” for the “when revisiting” selection in the slide properties. And there you have it! It looks like a lot, but once you've done it a time or two you can get the hang of it. Below is an example .story file of this interaction. It uses the same names as the instructions above so you can see how this all looks in a project.JAWS no longer reads table hotspots in the correct focus order
Since Storyline still does not support links to text within a cell we were advised to employ the approach of adding a hotspot over the cell that is then located within the focus order for the table in the correct position. This approach used to work. As of this posting it no longer appears to work. The hotspot is NOT read when advancing through the table cells (even though it appears in the focus order among the table line items directly after text that IS read). The screen reader advances to the next cell in the order without announcing or giving focus to the hotspot. The hotspots are only encountered if you table outside of the table. This is not acceptable for accessibility. If the recommendation for constructing a table with links within cells has changed could someone please advise as to how to make this work as intended again. Thanks, C GreenStoryline 360 not compliant with WCAG 2.1 AA accessibility guidelines
I see that Articulate claims on this page that "Storyline 360 supports WCAG 2.1 Level AA, including screen readers, keyboard navigation, visible focus indicators, and more." I'm confused though, because Articulate also highlights on page 11 of its Accessibility Conformance Report here that Storyline 360 is not compliant with WCAG 2.1 (Level AA), based on the fact that its text input fields do not support WCAG criterion 1.3.5: Identify Input Purpose. It also states that it does not meet criterion 3.1.2: Language of Parts. Obviously, if Articulate 360 only supports most of the criteria for Level AA, but not all of the criteria, then it is does not satisfy the requirements of WCAG 2.1 (Level AA) compliance. Therefore, I have advised my client that their requirement of WCAG 2.1 (Level AA) compliance cannot be achieved if we use Storyline. Could you please clarify if the report is now outdated and if any recent improvements to the software allow it to meet criteria 1.35 and 3.1.2? That is, is Storyline 360 now compliant with WCAG 2.1 AA, as per the claim on this page?Accessibility Checker Issues
Has anyone had an issue with the Accessibility checker tool disappearing, and no longer able to launch within Storyline? I can see the number of issues listed in the bottom bar but when I select all the options to review the accessibility checker, it no longer opens to list my items. Is there a quick solution? Are others having this same issue?Making a course 100% accessible
I've just installed the new version of Storyline and am playing with the new accessibility checker. I've added a multiple choice question and it fails on the text formatting even though its brand new out of the box, all I've done is amend the title and answer text. What styling would I need to apply to make it pass the text style check? I've tried heading and normal... but it still fails.Closed Caption Text Has Shadow
I used text-to-speech using the slide notes for a prototype in Storyline 360 (current update). All of the closed captions have this awful text shadow that I don't seem to be able to eliminate (see attached screenshot). I have gone to the player>colors & effects>closed captions and adjusted the font, text color, background color, font size, and position, but there is nowhere in there to adjust the text shadow. Does anyone have a suggestion for how to eliminate this without rebuilding the whole file? Thanks!NEW: Accessibility Checker in Storyline
Hey folks, just wanted to make sure you saw Storyline's latest update this week. Included is a feature that's sure to change how you build accessible courses forever. Built into Storyline is now an accessibility checker. With one click, the accessibility checker scans your course and generates a detailed report listing accessibility issues and shows you step-by-step how to fix them. Key features: Real-time scanning: One click, and it instantly finds potential accessibility issues. Guided fixes: It doesn’t just find problems, it shows you exactly how to fix them and includes one-click fixes. Learn by doing: You organically pick up accessibility best practices as you build your course. Documentation: Storyline 360: Improving Experiences With the Accessibility CheckerAccessible drag and drop quiz and the results
Hi, I asked this question here - Build an Accessible Drag and Drop Interaction in Storyline | Articulate - Community, but I don't think it's being monitored (Or I did it wrong😄). I followed the instructions given to create an accessible drag and drop quiz interaction, and it works for the most part. The challenge I have now is for the results of the interaction to be included in a results slide along with other quiz questions that have used the built-in layouts. I've had a go at custom variables to track the interaction results and I can see that score on a result slide. I can see someone else on the original discussion page also had a similar query. That being, can this type of interaction's score be included in an overall quiz results? Thank you Karen
