2

Folder List with re-order buttons

Above is just an example for my case. Example code available here.

I've arrived at above solution, while solving 2.1.1 Keyboard, 2.5.1 Pointer Gestures, 2.5.7 Dragging Movements criteria's combined for WCAG 2.2 AA compliance

Is there any bad UX in above solution?

References:

The re-order up/down buttons is not a new concept, its been there since long ..

Other similar UI/UX in production

Outlook Mail Rules reordering

Similar question with minimal info - Up & down arrows vs Drag & drop for reordering elements

Improve this question
2
  • 1
    Can you update the question with the information on what is the actual hesitation you are having. Commented May 5 at 6:51
  • @locationunknown thanks! Have updated the question. Commented May 5 at 8:53

2 Answers 2

Reset to default
0

If you need to be compliant with all three rules I would not use the 6-dots drag icon on the right. I would leve just the up and down arrows

2.1.1 Keyboard would be OK 2.5.1 Pointer Gestures would not apply in this case 2.5.7 Dragging Movements would not apply in this case

using both icons (6-dots AND up/down arrovws icons) basically duplicate the function, imposing more visual noise on the interface

Improve this answer
2
  • Drag and drop is the default way of reordering the list items. The general concerns of 2.5.1, 2.5.7 are, whatever UI actions involving mouse/pointer movement can also be done via an alternate simple UI action (click, keypress). By providing up/down buttons we satisfy both single click and keypress support for users who cannot use pointer movements. I do understand too many UI elements which does the same action is noise. But we have to keep both here. Hope my reason is understandable. Commented May 7 at 7:12
  • This answer in my linked question explains the benefits of drag and drop ux.stackexchange.com/a/45586/131737 Commented May 7 at 7:40
0

One issue that I can see in your example is that you're using the container or card as a focusable element. Then you have the buttons that are contained within the card, and that's when users from screen readers get confused.

I had a similar issue with the use of clickable cards and a group of buttons within it, the solution was to removed the focus from the card and just allow the focus on the buttons.

For your issue I recommend to use the focus on the buttons for each card and announce the card with aria-label, so the user can understand which card is trying to move and press enter to move upwards or downwards the card within the group.

enter image description here

For the other example you pasted, I can see that the container has the draggable icon, but each button has its own focus, so there is no issues with which element you're selecting.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.