Making Drag Text Accessible

Submitted by maggierogers402 on Mon, 04/19/2021 - 17:11
Forums: 
Content creation

I tried to use the tab key and arrow keys to see if keyboard navigation works for the visually impaired in a drag text interaction I made.  So far no dice, but perhaps there is some step I need to take to "turn on" keyboard navigation.

 

Thank you, in advance, for any suggestions.

Maggie Rogers

Ohio State University

 

Content types: 
Drag the Words
BV52's picture

BV52

Tue, 04/20/2021 - 19:26

Hi Maggie,

The Drag Text should work with keyboard only navigation. The keys to use are as follows:

  1. Tab - Highlight the draggable words
  2. Arrow keys to move between the draggable words
  3. Space to "pick up" the word (automatically highlights the drop zones)
  4. Arrow keys to move between the drop zones
  5. Space to drop the word.

-BV

mmercer

Thu, 07/15/2021 - 00:28

I followed the steps above using JAWS 2020 and Chrome Version 91.0.4472.124 (Official Build) (64-bit)  .
Steps 1-4 work fine. Step 5 doesn't. I can't get the selected "picked up" word to drop. This is very frustrating.

mmercer

Thu, 07/15/2021 - 00:30

I followed the steps above using JAWS 2020 and Chrome Version 91.0.4472.124 (Official Build) (64-bit)  .
Steps 1-4 work fine. Step 5 doesn't. I can't get the selected "picked up" word to drop. This is very frustrating.

mmercer

Thu, 07/15/2021 - 00:30

I followed the steps above using JAWS 2020 and Chrome Version 91.0.4472.124 (Official Build) (64-bit)  .
Steps 1-4 work fine. Step 5 doesn't. I can't get the selected "picked up" word to drop. This is very frustrating.

BV52's picture

BV52

Thu, 07/15/2021 - 19:00

Hi mmercer,

I just tried this and everything is working as expected. A few things that you can try to isolate the issue:

  1. Use a different browser/computer.
  2. Disable other plugins in Chrome.

-BV

papi Jo's picture

papi Jo

Sun, 08/27/2023 - 16:40

Actually, H5P Drag the Words is not fully accessible. The 5 steps you describe work fine. However, using the mouse it's possible to select an element that has been already been dropped on a drop zone and to drag it to a different drop zone. That is not possible using the keyboard. If one tabs to such an element and presses the space bar (or the Enter key), it is not selected, but throws a warning: "Are you sure you want to reset this drop zone?"

otacke's picture

otacke

Mon, 08/28/2023 - 09:09

And then? A modal opens asking you to either deny or confirm that question, and you can use the keyboard to choose your answer. On Denying, nothing happens, on confirming, the draggable is put back. That makes the handling different compared to using a mouse - you will need to put the draggable in another spot in a 2nd step - but you still can use the keyboard ony.

papi Jo's picture

papi Jo

Mon, 08/28/2023 - 13:57

OK