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: Birkir R. Gunnarsson
Date: Sep 23, 2022 9:57AM

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 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.