Svelte now has an accessible drag and drop library
Tags: webdev, javascript, showdev, svelte
Published: 2020-10-03 10:49:12

[svelte-dnd-action](https://github.com/isaacHagoel/svelte-dnd-action) has gone a long way since its inception. It has a rich set of features and is stable and robust. Accessibly was the last big missing puzzle piece and I couldn't consider the library "feature complete" or recommend using it in production as long as it wasn't accessible.

I am super happy to announce that starting in version 0.6.1, [svelte-dnd-action](https://github.com/isaacHagoel/svelte-dnd-action) is also **fully accessible out of the box** (with zero configuration).
Since it is a brand new feature and not yet battle tested, accessibility is currently in alpha. I expect it to only improve from here, and reach maturity quickly as feedback starts coming in.

## A Few words about accessibility
Accessibility in general is comprised of three aspects: 
1. **Visual**: sufficient contrast, font size etc. 
2. **Keyboard support**: it should be possible to interact with the user-interface without using a mouse (or other pointing devices).
3. **Semantic markup and assistive instructions** so that visually impaired users, that use screen readers, can find their way around the user interface, and understand the interactions that are taking place.

## Accessible drag and drop
Version 0.6.1 of [svelte-dnd-action](https://github.com/isaacHagoel/svelte-dnd-action) mainly focuses on items #2 and #3 in the list. 
Users can now manipulate items within drag-and-drop zones (including nested zones) using only their keyboard. Assistive instructions and proper tab indexes are added and managed automatically by the library.

Here are some screenshots with examples of assistive instructions and alerts being shown to the user when using a screen reader and their keyboard (not an exhaustive set. The goal is just to give you a sense of what it does):

**When the user tabs into a dnd zone:**
![When the user tabs into a dnd zone](https://dev-to-uploads.s3.amazonaws.com/i/ef521ptlduv40vtw8teh.png)
<br>
**When the user starts dragging:**
![When the user starts dragging](https://dev-to-uploads.s3.amazonaws.com/i/5ccfu2mar68xh1gjh2s1.png)
<br>
**When the user moves the item within its list:**
![When the user moves the item within its list](https://dev-to-uploads.s3.amazonaws.com/i/svg5karnw3zra54lvq3e.png)
<br>
**When the user moves the item to another list:**
![When the user moves the item to another list](https://dev-to-uploads.s3.amazonaws.com/i/0aflqfin42u0siled1lg.png)

As I said before. This is still in `alpha` and it will keep improving over time, but I am excited that it made it in and is here to stay. 

## Closing words
That's it for now. I won't take too much of your time. If you're using Svelte and need drag-and-drop capabilities for your application, you don't need to sacrifice accessibility anymore. [svelte-dnd-action](https://github.com/isaacHagoel/svelte-dnd-action) has got you covered.
I hope it will also inspire you to pay attention to accessibility in other parts of your application!
Feedback and contributions to the library are always welcome. Cheers and stay safe.

**P.S**
If you would like to learn some of the basics of the library and don't enjoy reading README.md files on github, check out [this short post](https://dev.to/isaachagoel/drag-and-drop-with-svelte-using-svelte-dnd-action-4554).