Forum Discussion
Accessibility solution for drag and drop
Hello all,
I am working on making a course ADA compliant. I have a slide that functions as drag and drop flash cards that I am having trouble with.
Hoping the community has a potential solution that can be done via keyboard or some other ADA compliant method.
I have added a sample three slide project. The second slide is the one that currently only works by drag and drop and the learner needs to place the boxes over the correct destination to continue to the next slide.
Thank you in advance for the help.
3 Replies
- AaronBurgessAUCommunity Member
I've been slowly updating old Drag and Drop's to Click to Move. (that's what I call it).
My solution keeps changing, but this version seems to be the easiest to manage.
Since I don't want a Screen Reader user having to click a variety of different objects just to get through a single question. As in click Card 2 and then find where you want to place it. And repeat for the other cards and also if you want to swap choices then click that card again and find another space. It can honestly become very confusing. Also the Alt Text becomes a nightmare to manage.
What I've done is break the slide down into 3 stages.
So I turned the slide into a true or false and then made 3 additional layers. Each layer has all 3 of the clickable card (Card 1, Card 2, Card 3) and each layer only targets only one of the blue rectangles (1, 2, or 3) at any one time. I've also had to give each target 3 new states that resemble the Cards.
There is a Confirm button that checks to make sure the user has selected a card, before the next layer is unlocked. The new layer removes the related lock and the triggers are repeated. Though there is additional triggers to disable the Card# you have previously used so you can't accidentally use Card 1 for all 3 stages.
You can have Card 1, Card 2 and Card 3 on the Base layer, but I found the additional triggers required to target each blue rectangle become far too complex.
On the final layer there is a reset button if the user thinks they made a mistake.
There is also a submit button which checks all the Blue cards to see if their states are correct, and then selects the Radio button (true or false) that matches those results. Basically if blue 1, 2 and 3 are Card1, Card2, Card3 then true, else false.
It is more work compared to just making a drag n drop slide, but it's a nice way to keep it visually interesting, while making it easy to navigate for someone using a keyboard/screen reader only.
Just make sure your Alt text is clear. For each Card # the Normal state would be something like "Unchecked, Card 1" and then the Selected state could be "Checked, Card 1"
Here is your project back with the modifications. Reach back if you have any questions. And also keen to know if there are easier solutions to this that meet accessibility requirements.
- MichaelRussell-Community Member
Thank you for this option Aaron. I will play around with this and see if I can deconstruct and customize. Question, what made the keyboard functionality work in your example? Was it the true/false nature of the slide, focus order, or the additional layers?
- AaronBurgessAUCommunity Member
Drag n Drop doesn't work for keyboard users. Any interactivity with a draggable object does not work. Word Bank, Sequence Drag n Drop etc. Hence having to update and change the slide to a true or false, or a multiple choice and rethink how to make it kind of look like a drag and drop.
Good luck