WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender]ARIA Drag and Drop Pattern

for

From: Bryan Garaventa
Date: Jan 4, 2023 11:14AM


Hi,
In case it's of help, there is an old article that I wrote to discuss the various considerations that go into accessible drag and drop, available at: https://www.linkedin.com/pulse/important-considerations-regarding-accessible-drag-drop-garaventa/

Since this was published, Apex 4X has replaced the deprecated TSG examples, so the links within the article no longer lead directly to the relevant test pages.

To access these, there is a keyboard sortable example of a listbox widget here: (matches the sortable listbox referenced within the article)
https://whatsock.com/Templates/Listboxes/Sortable/index.htm
(Does not have mouse drag and drop enabled)

Mouse drag and drop variations are available at: https://whatsock.com/Templates/Drag/index.htm#main
(Navigate between live test pages using the links within "Template Examples".)

Hope this helps a bit.

All the best,
Bryan


Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Brooks Newton
Sent: Wednesday, January 4, 2023 7:50 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [External Sender] Re: ARIA Drag and Drop Pattern

For Glen or anyone else who's got a perspective to share: In instances where a particular drag and drop interface isn't keyboard accessible, what instructions (if any) are required to guide users to the accessible version of the controls? Does this type of scenario fall under the "Conforming Alternate Versions <https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions>"
exception in the WCAG Understanding documentation?

What instructions are required to give users with disabilities a clearly discernible and accessible path to the page controls that keyboard only users will be able to use?

Brooks




On Wed, Jan 4, 2023 at 4:19 AM Detlev Fischer < <EMAIL REMOVED> >
wrote:

> That DnD does not have to be accessible for pointer users (mouse,
> touch) may no longer be true if and when the draft WCAG Success
> Criterion 2.5.7 Dragging Movements
> https://www.w3.org/TR/WCAG22/#dragging-movements
> becomes a W3C recommendation. This specfically asks for an alternative
> to DnD where the underlying function can be activated by single
> pointer inputs - independent of the question whether an alternative
> for keyboard operation exists. (When a keyboard-operable alternative
> such as a dropdowen is also pointer operable, it may satisfy both
> 2.1.1 Keyboard and 2.5.7 Dragging Movements).
>
> Am 03.01.2023 um 20:14 schrieb Brian Lovely via WebAIM-Forum:
> > As far as what Glen said:
> >
> > Not a specific answer but keep in mind that DnD does not
> necessarily
> > have
> > to be accessible. If DnD is used to perform an action, say, to
> > reorder a list, then as long as there is a keyboard way to reorder
> > that list, then you're ok. It's nice to make DnD accessible but it's not required.
> >
> > The problem I'm having is that this is already designed, so I have
> > to
> come
> > up with a solution that doesn't look any different. There aren't any
> > up/down buttons in the design, so I'm trying for an accessible drag
> > and drop solution.
> >
> > On Tue, Jan 3, 2023 at 2:10 PM glen walker < <EMAIL REMOVED> >
> wrote:
> >
> >> Not a specific answer but keep in mind that DnD does not
> >> necessarily
> have
> >> to be accessible. If DnD is used to perform an action, say, to
> >> reorder
> a
> >> list, then as long as there is a keyboard way to reorder that list,
> >> then you're ok. It's nice to make DnD accessible but it's not required.
> >>
> >> With Safari on iOS/iPad, if you have multiple websites open, the
> >> tabs in the browser can be rearranged by dragging them. With
> >> VoiceOver on it
> says
> >> they're a "tab" widget and then says "double tap and hold, then
> >> move
> left
> >> or right to re-order." It actually works pretty well with VoiceOver.
> VO
> >> will tell you the names of the other tabs as you move before or
> >> after
> them.
> >> > >> > >>
> https://urldefense.com/v3/__http://list.webaim.org/__;!!FrPt2g6CO4Wadw
> !I6_UZAZLONSqIpvIWhoLV_p8Q8LxGJEUFJSSgmT52nuWKxa0syTa8D3lLLO2G9OqTEA79
> C23U-7BO7rnYnKLGBQAeA$
> >> List archives at
> >>
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!
> FrPt2g6CO4Wadw!I6_UZAZLONSqIpvIWhoLV_p8Q8LxGJEUFJSSgmT52nuWKxa0syTa8D3
> lLLO2G9OqTEA79C23U-7BO7rnYnKtacdyfA$
> >> > >>
> >
>
> --
> Detlev Fischer
> DIAS GmbH
> (Testkreis is now part of DIAS GmbH)
>
> Mobil +49 (0)157 57 57 57 45
>
> http://www.dias.de
> Beratung, Tests und Schulungen für barrierefreie Websites
>
> > > archives at http://webaim.org/discussion/archives
> >