WebAIM - Web Accessibility In Mind

E-mail List Archives

for

From: glen walker
Date: Nov 9, 2018 8:25AM

The github example *should* work with both space and enter on firefox, the
javascript is listening for both 13 and 32 to start the drag, but as you
said, space doesn't work. Interestingly enough, if you bring up the
debugger and break on the onKeydown() handler, it *does* work.

I also agree that the lengthy aria-describedby is pretty distracting to
hear all the time. It should probably be associated with parent container
so you only hear it once, but the developer had the right idea and wanted
to associate the directions with the object. I tried a quick test in
firefox and modified the code to add a <div> with an aria-labelledby and
aria-describedby and a role="group" but only the label was read, not the
description. But I only tried with firefox and nvda and changing the code
in the inspector while nvda was running so there could be some funkiness
with it. I noticed the original code does not read the aria-labelledby
associated with the <ol>.

The main difference between the github example and the whatsock example
that Brandon posted is that whatsock doesn't require the arrow keys to move
the items so it doesn't need to be in forms mode. Perhaps this is a case
where the container around the list should be role="application". I would
do a lot of testing of that idea first. There are some roles that
naturally go into forms mode. You can see them listed on
https://www.w3.org/TR/wai-aria-practices/#kbd_generalnav. The "listbox"
role *might* work in this case.

I think the big thing with drag and drop is that you have to have a
keyboard accessible way to perform the same action. You don't necessarily
have to drag with the keyboard, such as the whatsock example which just
lets you select the book and it moves automatically. You don't have to
arrow the book over to the other list. If you can get the keyboard
interaction working, then getting it to work with a screen reader is just a
short step away.

Glen