E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Ramakrishnan Subramanian
Date: Fri, Sep 23 2022 9:41AM
Subject: How to make an interactive element that performs dual action Keyboard / Screen reader accessible?
No previous message | Next message →

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?

From: Birkir R. Gunnarsson
Date: Fri, Sep 23 2022 9:57AM
Subject: Re: How to make an interactive element that performs dual action Keyboard / Screen reader accessible?
← Previous message | Next message →

Simple, but clunky, add an actions column to the table with "move to
next column" and "move to previous column" buttons. If the task is in
the first column, make the "move to previous column" unavailable, same
if the task is in he last column (make "move to next column"
unavailable.

If you wanted to go one up you have to code the table as a grid, and
implementing full keyboard navigation within the grid for all users.
If you do that you can implement keyboard shortcuts like, ctrl-right
arrow to move the task one column to the right.
Keep in mind it's a larger effort and also will not work well on
phones or tablets.



On 9/23/22, Ramakrishnan Subramanian < = EMAIL ADDRESS REMOVED = > wrote:
> 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?
> > > > >


--
Work hard. Have fun. Make history.

From: Mark Magennis
Date: Fri, Sep 23 2022 10:55AM
Subject: Re: How to make an interactive element that performs dual action Keyboard / Screen reader accessible?
← Previous message | No next message

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