WebAIM - Web Accessibility In Mind

E-mail List Archives

Dashbaord: Drag and Drop and Resize

for

From: Sonja Weckenmann
Date: Sep 20, 2024 2:30AM

Hi all,

On a dashboard, there are cards that can be moved by drag and drop, and
they can be resized.

Does anyone know of any accessible best practice implementations?

The Salesforce example
(https://salesforce-ux.github.io/dnd-a11y-patterns/#/?_k=aj5xi9) works
well with the keyboard, but not with the screen reader on. The screen
reader does not automatically switch to focus mode. What about using
role="toolbar"? Not quite appropriate, but it should work then,
shouldn't it?

Since a pointer alternative is necessary anyway (e.g. action menu that
can be used to change the position and size) and can also be operated
using the keyboard would this alternative not be sufficient on its own
to fulfil SC 2.1.1?

I appreciate any ideas.
Thanks, Sonja