E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Sonja Weckenmann
Date: Fri, Sep 20 2024 2:30AM
Subject: Dashbaord: Drag and Drop and Resize
No previous message | Next message →

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

From: Geethavani.Shamanna
Date: Fri, Sep 20 2024 3:12AM
Subject: Re: Dashbaord: Drag and Drop and Resize
← Previous message | Next message →

Hi Sonja,

TPGI published a three-part blog on drag and drop accessibility last year along with some examples.

Here are links to the blog as well as other drag and drop resources:
The Road to Accessible Drag and Drop (Part 1)
https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-1/#drag-and-drop-wishlist

The Road to Accessible Drag and Drop (Part 2)
https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-2/

The Road to Accessible Drag and Drop (Part 3)
https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-3/

Accessible drag and drop examples:
https://salesforce-ux.github.io/dnd-a11y-patterns/#/?_k=sydibm

Deutsche Welle has some placement tests on its Learn German page. Several questions in these exercises involve drag and drop activities, which are surprisingly very accessible.
https://learngerman.dw.com/en/learn-german/s-9528

There might be more on the site, but here are a couple:
Placement test A1
https://learngerman.dw.com/en/exercise-1/l-36696748/e-36696750

Placement test A2
https://learngerman.dw.com/en/exercise-1/l-36696748/e-36696750

Hope this helps.
Geetha

From: Patrick H. Lauke
Date: Fri, Sep 20 2024 3:44AM
Subject: Re: Dashbaord: Drag and Drop and Resize
← Previous message | No next message

On 20/09/2024 09:30, Sonja Weckenmann wrote:

> 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?

Yes

--
Patrick H. Lauke

* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke