Keyboard Accessible Drag & Drop Example

The challenge was to make a drag and drop interface that is also keyboard accessible for JAWS screen readers (with Internet Explorer 11). I took a portion of the existing Healthy Choices example and converted it to a multiple choice quiz. In the "standard version" when the different food images are drug on to the plate they cause a check box to be selected in the background. In the "keyboard accessible version" the multiple choice question are in view and can be selected by tabbing. You can also drag and drop items with a mouse if wish.

Looking for feedback!

29 Replies
Teresa Vanderpost

I quickly grabbed a piece of an existing one that would be where I need help.  On slide two they can tab to the PWA Facts button but then the layers with the stickie notes there are hotspots.  Is there a way I could create a variable that when they got to the black arrow they could click spacebar or enterand it would open the first layer and then how could we get them and then tab through and get to arrow and see next layer by using spacebar or enter on the arrow.

The next slide would be similar, and the other one is I have an example where they hover over a picture to make it appear larger (on another layer) so again trying to give them away to do this.

I haven't configured the Tab Order button yet, it was a little confusing when I went in there on this particular slide

Joe Waddington

Hi Teresa -

Since you can't use hotspots in the tab order, what we've done is set up buttons either under things or just off screen. The sighted user will see the corner and know to click on the hotspot. For the blind user, the button will be the way they will turn the pages, and it will be hidden from the sighted user.

Check out my modified version of your file. I've also adjusted the tab order on your file to see how it should be set up.