Drag and Drop Doesn’t Have To Be a Nightmare

Back to blog

Drag and Drop Doesn’t Have To Be a Nightmare

Posted December 13, 2022

AudioEye

Posted December 13, 2022

A stylized webpage that shows different content blocks being dragged into place, next to an accessibility symbol.
A stylized webpage that shows different content blocks being dragged into place, next to an accessibility symbol.

In this post, Maxwell Ivey discusses the challenges of drag-and-drop functionality for screen reader users — and shares three examples of companies that provide accessible alternatives.

As someone who runs a website and spends plenty of time online in my daily life, I feel like I have a responsibility to help bring understanding between developers and visually impaired users.

One of the things I often talk about with sighted business owners and developers is the lack of a mouse when using a screen reader.

I can’t tell you how frustrating it is to be unable to submit a form or buy something online because I can’t check a box. Or how disappointing it is to install a new piece of software only to discover that I can’t use it because the program depends on clicking a mouse.

I also find it aggravating when something critical has to be done and I end up going to my brother or nephew to help me finish the task.

Yes, people who use screen readers and keyboards to navigate the internet can sometimes simulate a mouse click — but it isn’t reliable. And like many aspects of digital accessibility, it comes down to how a site was designed.

A user tapping the down arrow on a keyboard to move content blocks on a webpage.

Three Examples of Drag and Drop Done Right

Since I don’t have reliable access to a mouse, I cringe whenever I hear that I have to use any sort of drag-and-drop movement on a website.

However, that doesn’t mean there aren’t ways to make drag-and-drop accessible:

  • WordPress lets people rearrange blocks of text on a post or page by pressing “up” and “down” buttons on their site’s content editor.
  • LinkedIn allows users to move featured items or top skills around the screen with the press of a button.
  • Less Annoying CRM (LACRM) lets users adjust the order of fields on a form or workflow with simple keyboard commands (i.e., pressing the spacebar to pick up or drop items, and using the arrow keys to change the order of an item).

Each of these examples work because they give screen reader users (in addition to people who lack the fine motor skills to easily control a mouse) an easy alternative to the dragging motion that can be a source of so much frustration.

As you consider your own website, it’s important to be mindful of any interaction —whether it’s uploading a file or sorting a list — that requires users to drag their cursor across the screen.

If you don’t provide an accessible alternative, you run the risk of not conforming with accessibility standards like the Web Content Accessibility Guidelines (WCAG), which has guidelines addressing keyboard accessibility and drag-and-drop functionality.

Worse, you could be leaving potential customers behind.

Six icons of people surrounding a globe with an accessibility symbol in the center.

Inclusivity Is Good Business

I have given a talk about positivity. In it, I tell people that finding the positive in their lives is like finding anything else. You decide it is there somewhere, and you keep looking until you find it.

If you own a business, I want to challenge you to seek out solutions that can help you make your websites and apps more accessible and, as a result, more inclusive.

When you take all users into account when developing a product, you make it better for everyone. And the more people that can engage with your business and benefit from your products and services, the more customers you can attract and keep.

It seems like basic business sense, but I wish more companies would come to this realization.

Have you discovered any accessible products or services more people need to hear about? Do you have any experiences to share? Let me know what you find. I look forward to helping more companies understand the value of digital accessibility.

Thanks for listening, Max

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading