WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to make an interactive element that performs dual action Keyboard / Screen reader accessible?

for

From: Mark Magennis
Date: Sep 23, 2022 10:55AM


Hi Ramakrishnan. That's an interesting question.

There are different approaches to accessible drag and drop:

1. Allow users to move an element around the screen by direct manipulation, but using the keyboard keys instead of a mouse.
2. Allow the user to select an element then choose a command to apply to it such as Move to next column, Move to previous column, Move to column 4, etc. This can be done using buttons or a menu.

You can implement the first approach using JavaScript key handlers. The obvious keys for moving between columns are the left and right arrow keys. You shouldn't need to assign keys for picking up and dropping the element because you only need to allow users to 'shove' it to the previous or next column. However, this requires your table to be an application or more likely a grid, otherwise modal screen readers like JAWS and NVDA won't pass on the arrow key presses to the application because they use them for reading and navigation. But in an application or a grid, these screen readers go into 'application mode' (aka forms/focus mode) and pass on their keypresses to the application. However, this disables a lot of the screen reader's normal reading and navigation functionality so there are drawbacks to it. If your table is already a grid then it already has this drawback, but if it isn't then you need to think very carefully before going down this path. It means you will have to provide a lot of instructions. Not only to tell users which keys to use for moving an element but to inform them that they are in a grid and that their normal commands won't work. Many screen reader users are not used to grids and some screen readers will announce a grid as a "table" so expectations may not meet reality and you need to reset expectations. Add to that, depending on how the user gets into the grid - tabs into it, arrows into it, uses "t" to jump to the next table, etc. - the screen reader may or may not automatically switch to application mode. So users may need to do that manually in order to use your functionality and they may not know how. So the application approach is potentially difficult and time consuming for users in practice, having to read instructions, remember them, deal with going in and out of application mode, etc.

An alternative that doesn't require it being an application or a grid is to provide commands using buttons or a menu. 'Move to Next Column' and 'Move to Previous Column' buttons are simple but have the problem that the user would first need to select which element they want to move, then they would have to find the move button. This is messy. A menu might be a better choice. If each element is coded as a menu button using aria-haspopup, when the user presses Enter, a pop-up menu of column choices appears, they choose one, and the element is moved to that column. Simple. But then you have the other function which is opening the dialog. The normal way to do this is also to press Enter on a button so this makes things more tricky. You can't use Enter for both. Perhaps you could put the dialog opening command into the menu as a choice alongside the column moves? Or you could provide a button next to the element for either opening the menu or opening the dialog, and use Enter on the element for the other function. Not ideal but compared with making your table an application that might be clearer and easier for users.

There are probably a number of other approaches that you could think up. It should be an interesting journey to a solution that works for you and your users.

Mark

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Ramakrishnan Subramanian
Sent: Friday 23 September 2022 16:42
To: <EMAIL REMOVED>
Subject: [EXTERNAL] [WebAIM] How to make an interactive element that performs dual action Keyboard / Screen reader accessible?

Dear Members,
I have a query regarding making an interactive element that performs dual action Keyboard / Screen reader accessible.
We are testing a table in which the element present in each row can be dragged and dropped from one column to another. And the same element also triggers a modal dialog on click.
For example, we have A bunch of tasks present in each row of a table that can be moved from one column to another. i.e., columns like “Not started”, “in progress”, “completed”. And when we click the particular task, it triggers a modal dialog in which the additional detail about that task is given. How do we make it Screen reader / Keyboard accessible?



Thanks and Regards
Ramakrishnan
Dear Members,
I have a query regarding making an interactive element that performs dual action Keyboard / Screen reader accessible.
We are testing a table in which the element present in each row can be dragged and dropped from one column to another. And the same element also triggers a modal dialog on click.
For example, we have A bunch of tasks present in each row of a table that can be moved from one column to another. i.e., columns like “Not started”, “in progress”, “completed”. And when we click the particular task, it triggers a modal dialog in which the additional detail about that task is given. How do we make it Screen reader / Keyboard accessible?