Designing keyboard-accessible alternatives to drag and drop

The introduction of the new web accessibility regulations for the public sector might not have created the wave of panic we saw with the arrival of GDPR. Even so, individuals and organisations with accessibility awareness and compliance systems in place have understandably rallied to get on top of what the new requirements mean for their context. Some in the private and commercial sectors may be under the impression that, as the regulations do not directly apply to them, they needn’t take any action. However, in addition to the knock-on implications for suppliers of online learning to the public sector, there may be indirect consequences on the horizon for other contexts too. 

As students become accustomed to accessible online learning experiences in school, college and university, they will enter the workforce and other environments with similarly high expectations. Under the Equality Act 2010, an inability to meet these modern expectations could potentially amount to discrimination. Bear in mind too, that accessible learning experiences are better for everyone. A contemporary understanding of accessibility not only takes into account the needs of disabled people, but the full breadth of impairments and challenges that can be experienced by anyone due to aging, injury, pregnancy, broken equipment, and unpredictable working environments.

Accessibility first?

About a decade ago, we were all trying to adapt online learning to work on mobile devices, moving away from Flash and developing scalable, adaptive and responsive interfaces. It wasn’t long before some of us decided it would be more efficient to design “mobile first”, rather than having to create alternative versions for everything. We seem to be at a similar turning point with accessibility. For a while, we rushed to create alternative, accessible versions of our content. The alternatives, however, rarely offer equivalent opportunity to interact and engage as the the original format. There wouldn’t be a need for the primary formats if that were the case. Which begs the question, why not focus on accessibility first?

What would this mean for learning designers?

I can’t claim that every piece of digital content I create meets accessibility requirements. I’m still finding better ways to build accessibility into the more complex workflows of my design and development practice. But this is what needs to happen to achieve accessibility first outcomes. Most of us in the online learning sector have managed to grasp a set of do’s and don’ts relating to colour, contrast, captioning and so on. But there are still some areas where designers and developers find compliance frustrating. One of them is drag and drop interactions.

I haven’t built a drag and drop interaction in over a year. Drag and drop interactions can be intuitive solutions for the design of user interfaces, and can even enhance accessibility for some people with cognitive impairments. But if your mobility is impaired, or your device or workspace isn’t suitable, they might be challenging or impossible to use. That’s quite a big problem when it’s one of the most popular interaction types, loved by many designers and their clients. So can we really let it go?

Quite often, designers and developers will resort to creating a keyboard-accessible alternative to accompany, rather than replace the drag and drop. But that would suggest that the drag and drop activity is superior and necessary to fulfil the learning objective. So how inclusive is a learning experience that forces some learners to take a different path? Isn’t it the digital equivalent of insisting a wheelchair user enter a building via the back door and a form of “othering”?

The aim should be, then, to either develop a drag and drop interaction that can be controlled by mouse and keyboard, or use an accessible format in the first instance. When developing using predefined interactions in an authoring tool like Articulate Storyline or Adobe Captivate, this might appear to limit creative possibilities. But I have found that the opposite tends to be true.

When designing an activity, I choose the interaction that I feel best reflects the nature of the learning objective. So, let’s say the objective is to be able to sort objects for recycling. It’s one of the most common example use cases for drag and drop interactions. I thought about the cognitive and semantic value of the act of dragging and dropping. It’s fair to say that there is an agreeable sense of simulation in the act of selecting and moving of an object into a drop zone. But does that make it superior to any other way of learning to sort something? I’m not convinced it’s that important. 

An experienced and creative instructional designer ought to be able to reimagine the way they use the features of their authoring tool. I really enjoy the challenge of adapting established interaction types and coming up with new ones, so I came up with a few keyboard-accessible ideas for the “sort the recycling” scenario.

Ideas for alternatives to drag and drop

If you are using an authoring tool with predefined interaction types, the first thing to do is to look at the accessible ones from a fresh perspective. Instead of considering how they limit creativity, consider their flexibility. Can the elements be moved around? For example, can you move the answer boxes/buttons of a quiz question into different arrangements on screen? Can you use graphic design elements to restyle an interaction as an interactive scene or diagram? Can you use branching or conditional actions to enhance their functions? 

As long as you maintain a sensible focus and tabbing order of elements, and do not create other accessibility issues in the process, there is no reason why a seemingly mundane option, like multiple choice quiz, couldn’t form the basis of something more exciting!

Here are some examples I could think of to replace the recycling drag and drop scenario:

Multiple selection

If the authoring tool allows multiple objects to have a “selected” state, then you could allow learners to submit a selected state combination of what would have been a drag object and a counterpart drop object. The interaction type is illustrated below:

A sorting interaction for recycling

Dropdown answers

If you have a dropdown quiz answer feature in your authoring tool, or the know-how to create your own, drop-downs can be a keyboard accessible solution to sorting and selection activities. In the example below, the clean and simple graphics add visual interest to the activity without compromising accessibility. You could also add a button for learners to hide unnecessary graphics if there’s a concern they may create different accessibility issues.

A dropdown interaction for sorting recycling items

Pick and post

This is a slightly more advanced solution for designers who want to include a movement aspect in their design. Instead of the learner moving an object by clicking and dragging with a mouse, the item would be selected, along with a destination point, and this would trigger the item to move along the relevant motion path, as shown below.

A motion path interaction

There are a number of ways to do this – on the same slide with a group of conditional actions assigned, or across several slides, which can help organise lots of conditional actions into manageable groups. It depends on the tool, the complexity of the activity, and the preferences of the developer.

In the example shown, you want the learner to tab to the apple, select it, tab to the bin, select that, then send it to the bin. I’m not sure if there is a name for this, but I’m going to call it “pick and post”. It has the visual capacity of drag and drop, but is realised in a different way. Posting is the trigger or execution of an action to move the pickable object along a motion path to its destination.

To maintain all aspects of accessibility, a number of things will need to be considered in how this is presented, too. Make it really clear what can be picked and what the item is – don’t just rely on the images alone. To be sufficiently accessible, you should be able to complete the interaction without looking at the screen. This means that a screen reader should be able to read out what the objects are and what actions they perform. And don’t include alt text for decorative items. Test your interactions with different devices and with different potential impairments in mind. 

Is there a better way?

Drag and drop as a pedagogical device is only really essential if the skill or experience you are trying to teach is drag and drop itself e.g. how to use a drag and drop software feature. And, as I hope my examples have shown, eliminating it doesn’t have to compromise quality or style. Ideally, however, we shouldn’t have to eliminate drag and drop. It just needs to evolve and function as both drag and drop, and pick and post, simultaneously. Then everyone’s happy and no “back door” alternative is necessary.

The examples described above, or similar, can be built using tools like Articulate Storyline or Adobe Captivate. Learning developers with decent programming skills could build them using HTML5 and so it’s not beyond the realms of possibility that future versions of our favourite authoring tools may build pick and post features into their interactions. The Edtech community would certainly welcome and celebrate such enhancements!

We can see now that recreating drag and drop interactions in a keyboard-accessible way, while staying true to the spirit of the objective, is actually possible. As such, these examples might be considered “accessibility first” in their design. Accessibility first, like mobile first, however, should still have learning and learners at heart. Avoiding a medium that’s known or has the potential to improve learning experiences and outcomes for a majority or group of learners, on the grounds it may be inaccessible to some is not the aim here. The point is that accessibility should not be an afterthought.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Are you are interested in becoming an instructional designer? Check out our Learning Design Foundation Certificate.

Are you an organisation looking to develop in-house digital learning design skills? We can provide bespoke packages of training and support for individual employees, teams and projects.

To learn more about our training, mentoring and consultancy services, please get in touch

Scroll to Top

Pedagogy

Pedagogy is generally defined as the art, science and craft of teaching. The first pedagogues were Greek slaves who were responsible for caring for and instructing their masters’ children. In fact, the Greek origin of the word means ‘to lead the child’.

So, pedagogy may also be considered to be about nurture and pastoral care, as well as teaching. Despite the reference to children, the term is used fairly comfortably in adult education contexts. However, andragogy, which translates as ‘to lead the man’, may be used to refer specifically to the teaching of adults.

A number of related and derivative terms may be used to define particular fields of pedagogical interest, including digital pedagogycritical pedagogy, and heutagogy.