Provide an alternative to dragging

Dragging, swiping, drag&drop seem intuitive ways to operate an interface. But they are not usable for everyone because these movements require good motor skills and a visual overview over the screen.

For example: an exercise with a map of Europe where one has to drag the capital cities to the countries.

To drag Madrid to Spain, one needs to:

1. move the mouse pointer to the word "Madrid";
2. press the left mouse button;
3. move the cursor to the correct country on the map while keeping the button pressed;
4. release the mouse button.

Difficulties

• Some people with a motor impairment can't keep a cursor pressed or can't make movements in different directions. Assistive technologies can offer solutions, but they are time consuming.
• Also with a finger on a small touch screen the exercise can be difficult.
• For someone who is partially sighted who uses a large zoom factor who sees only a small portion of the page, the exercise is very complex because (s)he does not know in which direction to move the words.
• For blind people, exercises with drag-and-drop are not possible because they don't see where the cursor is located.

Solution

To make interfaces with dragging usable for everyone:

• Provide an alternative that works with clicks (one or more) and that does not require combinations of movements.
• make sure that the interface is also usable with the keyboard. If the alternative solution uses default accessible interface-elements, this will automatically be the case.
• make sure that the interface is understandable wihtout sight and operable with a screenreader.

A few concrete examples.

Dragging items from one column to another

Our CRM has a Kanban bord with three columns for audits: planned, in progress and done. When an audit is ready, we can drag it from the column "In progress" to the column "Done". There is an alternative: click on the button that shows the details of the audit, click then on the dropdown list with the possible states, and then on the state "Done".

Another example is a selection which fields a table must contain. The left hand column displays all available fields, and the selected fields are in the right hand column. One can drag the fields from one column to the other and also inside a column one can drag to change the order of the fields. As alternative, there are two buttons "Add" and "Remove" between the two columns. It is enough to click on a field in the left hand column and then on the button "Add" to move it to the other column. "Top", "Down", "Up" and "Bottom" buttons are also available.

Move an item in a treeview

In our CMS backend we can reorder the pages by dragging them to a different place in the treeview. Since this way of working is not usable for everyone, there is an alternative. In the settings of each page three dropdown lists are available to:

• in which navigation menu the page shuould be placed (e.g. the main menu).
• a reference page (e.g. "Home > Contact");
• the position of the page compared to this reference page (e.g. as sub page).

Sliders to adjust a value

Some search engines let you a set a price range by dragging two values on a line.

There are at least two methods to do the same with clicks. The first is to provide two text fields to fill in minimum and maximum values. The other is to provide "+" and "-" buttons to increase or decrease the value. You can use this method when one value is to be set.

Sliders or carousels

Let's take the example of an image gallery slider, where you can browse through pictures on a touch screen with a swipe movement. It is also a kind of dragging, because one must press and keep pressing during the horizontal movement to move the visible picture and replace it by another one.

A possible solution is to provide "Previous" and "Next" buttons. One can then click on these buttons to operate the slider. Buttons (HTML-button element) are automatically accessible with the keyboard and when their name is meaningful, the function of the slider will be clear for a blind user. The slider will also Automatically be usable with speech recognition software.

Points of attention:

• Use real buttons, as they work with the mouse and the keyboard
• Give them meaningful names (e.g. "previous picture" or "next article") as visible text or as text alternative for an icon
• Hide buttons that are not active to avoid confusion. Don't show a "next" button with the last picture.

Drag-and-drop exercises in an e-learning course

An e-learning course may contain exercises where one should link two concepts or words by dragging them to the correct place in a text.

Several solutions are possible. An option can be to click on a first element and then on a second, to link tehm, wihtout keeping pressed. Another option is to associate numbers or letters to the different options and to let them select in a dropdown list instead of having to drag them to the correct place.

Conclusion

• Dragging and swiping are not possible for everyone.
• Provide an alternative that only requires click actions.
• Think about it during design, otherwise it will be difficult to adjust later.

Source

WCAG Successcriterium 2.5.7 Dragging movements