E-mail List Archives
Thread: Drag n drop
Number of posts in this thread: 12 (In chronological order)
From: Shiva Pourgholaminejad
Date: Tue, Jun 26 2018 1:59PM
Subject: Drag n drop
No previous message | Next message →
Hello All,
I am looking for an accessible version of drag and drop and text selection features.
I'd appreciate any thought about them.
Thanks
Shiva Pourgholaminejad
Accessibility Compliance Trusted Tester (Cert #300937)
https://www.dhs.gov/trusted-tester
Graduate Research Assistant
Student Services
University of Nevada Reno
(775)682-8512
https://www.unr.edu/accessibility
From: glen walker
Date: Tue, Jun 26 2018 2:08PM
Subject: Re: Drag n drop
← Previous message | Next message →
Most drag and drop actions should have an alternate keyboard action. You
can look at powerpoint as an example. Mouse users can drag powerpoint
objects around to position them or drag out a side or corner of a region to
resize. You can do the same thing using a keyboard. You tab to go from
object to object. When the desired object is selected, you can use the
arrow keys to move the object and modified arrow keys to resize and
rotate. Shift+arrow does big size changes and ctrl+shift+arrow does
smaller resize changes. Alt+arrow rotates. Pressing Enter or F2 on an
object allows you to edit the contents of the object. Escape saves the
edits and puts the focus back on the object.
That's just an example. I'm not sure what your situation is but anything a
mouse user can do with drag and drop in your interface should be doable
from the keyboard too.
On Tue, Jun 26, 2018 at 1:59 PM, Shiva Pourgholaminejad <
= EMAIL ADDRESS REMOVED = > wrote:
> Hello All,
> I am looking for an accessible version of drag and drop and text selection
> features.
> I'd appreciate any thought about them.
> Thanks
>
> Shiva Pourgholaminejad
> Accessibility Compliance Trusted Tester (Cert #300937)
> https://www.dhs.gov/trusted-tester
> Graduate Research Assistant
> Student Services
> University of Nevada Reno
> (775)682-8512
> https://www.unr.edu/accessibility
>
>
> > > > >
From: Brandon Keith Biggs
Date: Tue, Jun 26 2018 5:27PM
Subject: Re: Drag n drop
← Previous message | Next message →
Hello,
See the AccDC drag and drop:
http://whatsock.com/tsg/Coding%20Arena/Drag%20and%20Drop/demo.htm
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Tue, Jun 26, 2018 at 12:59 PM, Shiva Pourgholaminejad <
= EMAIL ADDRESS REMOVED = > wrote:
> Hello All,
> I am looking for an accessible version of drag and drop and text selection
> features.
> I'd appreciate any thought about them.
> Thanks
>
> Shiva Pourgholaminejad
> Accessibility Compliance Trusted Tester (Cert #300937)
> https://www.dhs.gov/trusted-tester
> Graduate Research Assistant
> Student Services
> University of Nevada Reno
> (775)682-8512
> https://www.unr.edu/accessibility
>
>
> > > > >
From: mhysnm1964@gmail.com
Date: Wed, Jun 27 2018 12:27AM
Subject: Re: Drag n drop
← Previous message | Next message →
Glenn,
Interesting that PowerPoint supports the keyboard in the fashion you have
outlined. The issue I see is how does a screen reader know where the object
is going to be land. I know this is a side track to the original question.
As PowerPoint has to inform the user of the position and if the object is
overlapping other items.
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen
walker
Sent: Wednesday, 27 June 2018 6:09 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Drag n drop
Most drag and drop actions should have an alternate keyboard action. You
can look at powerpoint as an example. Mouse users can drag powerpoint
objects around to position them or drag out a side or corner of a region to
resize. You can do the same thing using a keyboard. You tab to go from
object to object. When the desired object is selected, you can use the
arrow keys to move the object and modified arrow keys to resize and rotate.
Shift+arrow does big size changes and ctrl+shift+arrow does smaller resize
changes. Alt+arrow rotates. Pressing Enter or F2 on an object allows you
to edit the contents of the object. Escape saves the edits and puts the
focus back on the object.
That's just an example. I'm not sure what your situation is but anything a
mouse user can do with drag and drop in your interface should be doable from
the keyboard too.
On Tue, Jun 26, 2018 at 1:59 PM, Shiva Pourgholaminejad <
= EMAIL ADDRESS REMOVED = > wrote:
> Hello All,
> I am looking for an accessible version of drag and drop and text
> selection features.
> I'd appreciate any thought about them.
> Thanks
>
> Shiva Pourgholaminejad
> Accessibility Compliance Trusted Tester (Cert #300937)
> https://www.dhs.gov/trusted-tester
> Graduate Research Assistant
> Student Services
> University of Nevada Reno
> (775)682-8512
> https://www.unr.edu/accessibility
>
>
> > > archives at http://webaim.org/discussion/archives
> >
http://webaim.org/discussion/archives
From: mhysnm1964@gmail.com
Date: Wed, Jun 27 2018 12:28AM
Subject: Re: Drag n drop
← Previous message | Next message →
What do you want to do with drag and drop? Are you trying to take text from
one location and place it in another? CTRL X and Ctrl v does this after an
item has been selected. I don't think this is what you are after. Please
expand.
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Shiva
Pourgholaminejad
Sent: Wednesday, 27 June 2018 6:00 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Drag n drop
Hello All,
I am looking for an accessible version of drag and drop and text selection
features.
I'd appreciate any thought about them.
Thanks
Shiva Pourgholaminejad
Accessibility Compliance Trusted Tester (Cert #300937)
https://www.dhs.gov/trusted-tester
Graduate Research Assistant
Student Services
University of Nevada Reno
(775)682-8512
https://www.unr.edu/accessibility
http://webaim.org/discussion/archives
From: glen walker
Date: Wed, Jun 27 2018 9:28AM
Subject: Re: Drag n drop
← Previous message | Next message →
Yes, I mentioned the non-clarity in my reply regarding how powerpoint
works. I was just giving an example but said I wasn't sure what situation
the OP was asking about. Lots of us are here to help if we have more
details of what's needed.
And regarding powerpoint, it will tell you if an object is "behind" or
"covers" another object as you move it, which I thought were a good choice
of words. If it had said it "overlaps", that might not be clear which
object is on top. The amount of overlap is given in "points", which I'm
not sure is useful, but at least it's some kind of measurement of how much
it overlaps. And it tells you how much of the left and right side of an
object is covered, and how much of the top and bottom of an object is
covered.
On Wed, Jun 27, 2018 at 12:28 AM, < = EMAIL ADDRESS REMOVED = > wrote:
> What do you want to do with drag and drop? Are you trying to take text from
> one location and place it in another? CTRL X and Ctrl v does this after an
> item has been selected. I don't think this is what you are after. Please
> expand.
>
>
From: Guy Hickling
Date: Wed, Jun 27 2018 6:15PM
Subject: Re: Drag n drop
← Previous message | Next message →
Not a lot has been said yet about making this accessible for screen and
Braille reader users, but they must be catered for as well. This is likely
to require explaining things in greater detail so they know what's
happening, as well as giving them a mechanism they can use.
A common use case is in online tests, where the user is given several items
to drag and an equal number of targets, and they must drop the right item
in each target. Here it is probably simple to take the keyboard version and
ensure all the items and targets are announced correctly when the screen
reader user lands on them, but they might need more instructions. For
instance, if the on screen text simply says "drop the items into the
correct boxes", that doesn't tell the user how many items there are or or
how many boxes they have to drop into taking place, so tell them upfront
using aria-describedby or hidden text.
It must also be announced when the user has successfully dropped the item
into the box they wanted (confirm which box they actually dropped it into,
not just "item has been dropped", so they are certain it went where they
meant it to go. The Whatsock example someone suggested earlier in this
thread doesn't announce the drop, it simply repeats the label on the
selected item which is not helpful. (And it also uses links for the drag
items, which gives screen reader users the wrong information as they don't
go to another page. A button would be better.)
Screen reader user should also be able to traverse the targets at the end
of it all and hear announcements of what item is now in each target, to
confirm what they have done. The page should not move on to the next page
in the sequence, for instance, automatically as soon as the last item has
been dropped. (And all users need a means to change their choices if they
make a mistake in the drop.)
Some more complex situations may be too complex to simply use the existing
keyboard mechanism for screen reader users. In that case you might need to
provide a whole separate version of the component for screen reader users,
accessed via a link placed beside the visual version (a bit like
alternative texts for very complex images can be provided via a link beside
the image). Then provide an alternative choose-and-drop mechanism that is
meaningful and usable by screen reader users. The process would not
necessarily have to mimic the visual component exactly, so long as a screen
reader user can make all the same choices that a sighted user can. (Just
deciding a version for screen reader users is not possible would only be a
last resort, if it really truly is not meaningful or possible to so it. In
which case SC1.1.1 would require an alternative text to say what is there.)
âFinally, ARIA has the aria-dropeffect attribute to use where appropriate.
â
Regards,
Guy Hickling
âFreelance â
Accessibility Consultant
From: Birkir R. Gunnarsson
Date: Wed, Jun 27 2018 7:24PM
Subject: Re: Drag n drop
← Previous message | Next message →
aria-grabbed and aria-dropeffect are depricated in ARIA 1.1 (no longer
recommended though they could be used for backwards compatibility).
Strange as it may seem, nobody has really come up with an accessible
drag and drop solution for the web, neither using ARIA nor HTML.
Every solution you implement has to be based on a series of
unfortunate hacks using text to describe the actions.
If you can give us more detail about exactly what the drag and drop
action entails we might be able to provide more helpful examples or
advice.
On 6/27/18, Guy Hickling < = EMAIL ADDRESS REMOVED = > wrote:
> Not a lot has been said yet about making this accessible for screen and
> Braille reader users, but they must be catered for as well. This is likely
> to require explaining things in greater detail so they know what's
> happening, as well as giving them a mechanism they can use.
>
> A common use case is in online tests, where the user is given several items
> to drag and an equal number of targets, and they must drop the right item
> in each target. Here it is probably simple to take the keyboard version and
> ensure all the items and targets are announced correctly when the screen
> reader user lands on them, but they might need more instructions. For
> instance, if the on screen text simply says "drop the items into the
> correct boxes", that doesn't tell the user how many items there are or or
> how many boxes they have to drop into taking place, so tell them upfront
> using aria-describedby or hidden text.
>
> It must also be announced when the user has successfully dropped the item
> into the box they wanted (confirm which box they actually dropped it into,
> not just "item has been dropped", so they are certain it went where they
> meant it to go. The Whatsock example someone suggested earlier in this
> thread doesn't announce the drop, it simply repeats the label on the
> selected item which is not helpful. (And it also uses links for the drag
> items, which gives screen reader users the wrong information as they don't
> go to another page. A button would be better.)
>
> Screen reader user should also be able to traverse the targets at the end
> of it all and hear announcements of what item is now in each target, to
> confirm what they have done. The page should not move on to the next page
> in the sequence, for instance, automatically as soon as the last item has
> been dropped. (And all users need a means to change their choices if they
> make a mistake in the drop.)
>
> Some more complex situations may be too complex to simply use the existing
> keyboard mechanism for screen reader users. In that case you might need to
> provide a whole separate version of the component for screen reader users,
> accessed via a link placed beside the visual version (a bit like
> alternative texts for very complex images can be provided via a link beside
> the image). Then provide an alternative choose-and-drop mechanism that is
> meaningful and usable by screen reader users. The process would not
> necessarily have to mimic the visual component exactly, so long as a screen
> reader user can make all the same choices that a sighted user can. (Just
> deciding a version for screen reader users is not possible would only be a
> last resort, if it really truly is not meaningful or possible to so it. In
> which case SC1.1.1 would require an alternative text to say what is there.)
>
> âFinally, ARIA has the aria-dropeffect attribute to use where appropriate.
>
> â
> Regards,
> Guy Hickling
> âFreelance â
> Accessibility Consultant
> > > > >
--
Work hard. Have fun. Make history.
From: Steve Green
Date: Wed, Jun 27 2018 8:19PM
Subject: Re: Drag n drop
← Previous message | Next message →
We have just won a testing project, part of which involves drag and drop functionality in online tests exactly as Guy described. When this thread appeared I hoped (without any expectation) that someone might have cracked the problem by now, but it seems not.
In our case the problem is even worse because when one item is moved, all the ones below it move too. I haven't started work on it yet, but my initial thoughts are that it's just not possible to make it accessible so I expect to have to experiment with other means of interaction while trying to maintain something like the existing appearance and functionality.
Unlike the PowerPoint example, the tests could be designed without dragging at all. I am considering using comboboxes, each of which contains all the answers, but when an answer is selected in one combobox it is made unselectable in all the others.
Steve Green
Managing Director
Test Partners Ltd
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: 28 June 2018 02:25
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Drag n drop
aria-grabbed and aria-dropeffect are depricated in ARIA 1.1 (no longer recommended though they could be used for backwards compatibility).
Strange as it may seem, nobody has really come up with an accessible drag and drop solution for the web, neither using ARIA nor HTML.
Every solution you implement has to be based on a series of unfortunate hacks using text to describe the actions.
If you can give us more detail about exactly what the drag and drop action entails we might be able to provide more helpful examples or advice.
On 6/27/18, Guy Hickling < = EMAIL ADDRESS REMOVED = > wrote:
> Not a lot has been said yet about making this accessible for screen
> and Braille reader users, but they must be catered for as well. This
> is likely to require explaining things in greater detail so they know
> what's happening, as well as giving them a mechanism they can use.
>
> A common use case is in online tests, where the user is given several
> items to drag and an equal number of targets, and they must drop the
> right item in each target. Here it is probably simple to take the
> keyboard version and ensure all the items and targets are announced
> correctly when the screen reader user lands on them, but they might
> need more instructions. For instance, if the on screen text simply
> says "drop the items into the correct boxes", that doesn't tell the
> user how many items there are or or how many boxes they have to drop
> into taking place, so tell them upfront using aria-describedby or hidden text.
>
> It must also be announced when the user has successfully dropped the
> item into the box they wanted (confirm which box they actually dropped
> it into, not just "item has been dropped", so they are certain it went
> where they meant it to go. The Whatsock example someone suggested
> earlier in this thread doesn't announce the drop, it simply repeats
> the label on the selected item which is not helpful. (And it also uses
> links for the drag items, which gives screen reader users the wrong
> information as they don't go to another page. A button would be
> better.)
>
> Screen reader user should also be able to traverse the targets at the
> end of it all and hear announcements of what item is now in each
> target, to confirm what they have done. The page should not move on to
> the next page in the sequence, for instance, automatically as soon as
> the last item has been dropped. (And all users need a means to change
> their choices if they make a mistake in the drop.)
>
> Some more complex situations may be too complex to simply use the
> existing keyboard mechanism for screen reader users. In that case you
> might need to provide a whole separate version of the component for
> screen reader users, accessed via a link placed beside the visual
> version (a bit like alternative texts for very complex images can be
> provided via a link beside the image). Then provide an alternative
> choose-and-drop mechanism that is meaningful and usable by screen
> reader users. The process would not necessarily have to mimic the
> visual component exactly, so long as a screen reader user can make all
> the same choices that a sighted user can. (Just deciding a version for
> screen reader users is not possible would only be a last resort, if it
> really truly is not meaningful or possible to so it. In which case
> SC1.1.1 would require an alternative text to say what is there.)
>
> âFinally, ARIA has the aria-dropeffect attribute to use where appropriate.
>
> â
> Regards,
> Guy Hickling
> âFreelance â
> Accessibility Consultant
> > > archives at http://webaim.org/discussion/archives
> >
--
Work hard. Have fun. Make history.
From: Brandon Keith Biggs
Date: Wed, Jun 27 2018 8:26PM
Subject: Re: Drag n drop
← Previous message | Next message →
Hello,
If we are going to look at non semantic interfaces, Audio Games allow for
drag and drop functionality. Most effective are strategy games where you
need to move objects around the grid. You can either press enter on the
object you want to move and have a sound play letting you know you are
dragging the object and press enter to set it down in another square, or
have the user press something like shift and the arrow keys to move the
object to an adjacent square.
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Wed, Jun 27, 2018 at 7:19 PM, Steve Green < = EMAIL ADDRESS REMOVED =
> wrote:
> We have just won a testing project, part of which involves drag and drop
> functionality in online tests exactly as Guy described. When this thread
> appeared I hoped (without any expectation) that someone might have cracked
> the problem by now, but it seems not.
>
> In our case the problem is even worse because when one item is moved, all
> the ones below it move too. I haven't started work on it yet, but my
> initial thoughts are that it's just not possible to make it accessible so I
> expect to have to experiment with other means of interaction while trying
> to maintain something like the existing appearance and functionality.
>
> Unlike the PowerPoint example, the tests could be designed without
> dragging at all. I am considering using comboboxes, each of which contains
> all the answers, but when an answer is selected in one combobox it is made
> unselectable in all the others.
>
> Steve Green
> Managing Director
> Test Partners Ltd
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: 28 June 2018 02:25
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Drag n drop
>
> aria-grabbed and aria-dropeffect are depricated in ARIA 1.1 (no longer
> recommended though they could be used for backwards compatibility).
> Strange as it may seem, nobody has really come up with an accessible drag
> and drop solution for the web, neither using ARIA nor HTML.
> Every solution you implement has to be based on a series of unfortunate
> hacks using text to describe the actions.
> If you can give us more detail about exactly what the drag and drop action
> entails we might be able to provide more helpful examples or advice.
>
>
>
> On 6/27/18, Guy Hickling < = EMAIL ADDRESS REMOVED = > wrote:
> > Not a lot has been said yet about making this accessible for screen
> > and Braille reader users, but they must be catered for as well. This
> > is likely to require explaining things in greater detail so they know
> > what's happening, as well as giving them a mechanism they can use.
> >
> > A common use case is in online tests, where the user is given several
> > items to drag and an equal number of targets, and they must drop the
> > right item in each target. Here it is probably simple to take the
> > keyboard version and ensure all the items and targets are announced
> > correctly when the screen reader user lands on them, but they might
> > need more instructions. For instance, if the on screen text simply
> > says "drop the items into the correct boxes", that doesn't tell the
> > user how many items there are or or how many boxes they have to drop
> > into taking place, so tell them upfront using aria-describedby or
> hidden text.
> >
> > It must also be announced when the user has successfully dropped the
> > item into the box they wanted (confirm which box they actually dropped
> > it into, not just "item has been dropped", so they are certain it went
> > where they meant it to go. The Whatsock example someone suggested
> > earlier in this thread doesn't announce the drop, it simply repeats
> > the label on the selected item which is not helpful. (And it also uses
> > links for the drag items, which gives screen reader users the wrong
> > information as they don't go to another page. A button would be
> > better.)
> >
> > Screen reader user should also be able to traverse the targets at the
> > end of it all and hear announcements of what item is now in each
> > target, to confirm what they have done. The page should not move on to
> > the next page in the sequence, for instance, automatically as soon as
> > the last item has been dropped. (And all users need a means to change
> > their choices if they make a mistake in the drop.)
> >
> > Some more complex situations may be too complex to simply use the
> > existing keyboard mechanism for screen reader users. In that case you
> > might need to provide a whole separate version of the component for
> > screen reader users, accessed via a link placed beside the visual
> > version (a bit like alternative texts for very complex images can be
> > provided via a link beside the image). Then provide an alternative
> > choose-and-drop mechanism that is meaningful and usable by screen
> > reader users. The process would not necessarily have to mimic the
> > visual component exactly, so long as a screen reader user can make all
> > the same choices that a sighted user can. (Just deciding a version for
> > screen reader users is not possible would only be a last resort, if it
> > really truly is not meaningful or possible to so it. In which case
> > SC1.1.1 would require an alternative text to say what is there.)
> >
> > âFinally, ARIA has the aria-dropeffect attribute to use where
> appropriate.
> >
> > â
> > Regards,
> > Guy Hickling
> > âFreelance â
> > Accessibility Consultant
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > at http://webaim.org/discussion/archives
> > > > > >
From: Tim Harshbarger
Date: Thu, Jun 28 2018 7:03AM
Subject: Re: [EXTERNAL] Drag n drop
← Previous message | Next message →
In case it helps--here is how I would go about solving an accessibility problem with drag and drop. This approach isn't necessarily unique to myself. I have observed others do the same thing when they are confronted with particularly difficult accessibility issues.
First you want to figure out what the purpose of the interaction is in the current interface. What does this interaction help the user accomplish? Regarding drag and drop, I have seen it used to do a couple of things. Your situation might not fit either one of these.
I have seen drag and drop used to help a user move something from one state to another. For example, moving a task from an incoming queue to a completed queue. I have also seen it used in a maze game--where the user selects the character, drags the character along a path in the maze, and drops the character into a specific position of the maze. In that situation, the purpose of drag and drop seemed to be to allow the user to draw the path for solving the maze.
I also try to break the interaction down into smaller pieces. For example, with regards to drag and d drop I would probably break it down like this.
* The user identifies the item that they want to drag.
* The user identifies the destination where they want to place the item.
* The user selects the item in its origin location.
* The user drags the item along a drag path to the destination.
* When the user reaches the destination, the user does something to indicate that the item should be placed at the destination.
Between those 2 things, I end up with a better idea of what the problem is and that gives me ideas for what might be needed for a solution.
For example... With regards to dragging a task from one queue to another, I would assume that I don't need to solve the problems involved with a drag path. I just need to find a way for the user to identify the item they want to move, provide a way for them to select the item, allow the user to identify the destination, and provide a way for the user to indicate the destination of the item they selected.
For the maze game, I know I would also need to provide some way that allows the user to select the path through the maze--perhaps if the maze is broken into tiles I need to provide a way for the user to select the tiles that make up the drag path.
If I do all the things above and neither I nor my colleagues can come up with a solution, I usually look at starting over again since it might mean that I still haven't quite understood the purpose of the interaction or have broken it down correctly. Of course, it also can mean that there just might not be a solution currently available for the problem. If that is the case, then it is time to come up with an alternative that is accessible.
I hope this helps in some way.
Thanks,
Tim
From: glen walker
Date: Thu, Jun 28 2018 8:55AM
Subject: Re: [EXTERNAL]Drag n drop
← Previous message | No next message
Tim, yes, that's exactly what I do. The DND is just the interaction to
complete a task. I have not come across any scenarios where the task could
not also be completed using the keyboard when you break the situation down
as you described.
Glen