Marc Hughes


Home
Blog
Twitter
LinkedIn
GitHub
about
I am a developer from a bit west of Boston.

Universal Design / Keyboard Access / Drag and Drop

06 May 2008

Creating a Flex application that allows keyboard navigation to promote Universal Design can be hard. Not technically hard, but hard in the sense of getting everyone thinking about it from the start. Recently I was at a design review meeting looking at some great ideas for an educational program aimed at teaching kids fractions.  One of the problems had two big circles and 4 options under it.  The student is supposed to drag one of the 4 options to each circle to complete the problem.  Something like this (The real example has meaning behind the circles & options, but this is just a quick visual.)

Very logical design choice.  But... one of the development goals in applications my employer creates is to provide an application that is suitable for kids with disabilities.  (It's both a noble goal that my workplace believes in, and a busines goal since a lot schools have universal access as a purchase requirement)

So what about the kid who is motor-imparied?  Dragging is a "difficult" operation.  Pressing a mouse button, keeping it down, and moving the mouse takes some dexterity. 

We could implement a system where we let a kid keyboard navigate to a lettered option, then press some key to "pick it up", and use the arrows to put it in a circle, with another key to drop it.  But that's a very unnatural computer interaction, and requires additional engineering and QA time beyond the basic problem.

Now imagine a kid who might be vision-impaired.  Interacting with a screen reader to tell it when one object is over another object is a daunting task.

So let's step back.  Is drag and drop really needed here?  What if we modified the design and went from a drag and drop to a button-press?  Maybe we get something like this:

Now it's a simple button press on each circle.  Quicker and easier for everyone, and it's easily done with or without a mouse. There is no extra engineering or QA work to support motor imparied kids, and hell, simple buttons are probably less engineering than the first option overall.  Our designers are top-notch and I have no doubt they can make that design look just as good as the original one.  So maybe we go from "3 units of engineering time" to "1 unit of engineering time" (days,weeks,hours depending on complexity, etc.) and from "2 units of QA time" to 1.  We just saved a bunch of money and made it more accessible, win win?

So what about the times that you really DO need to drag things around.  Well, for normal Flex drag & drop, you're on your own.  But if you're dragging things around for placement and sizing, then my ObjectHandles library is going to help you out since I just added keyboard navigation to it and that will be released "real soon now" in the next release.