WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table of selectable records

for

From: JP Jamous
Date: Sep 10, 2018 5:59PM

Let's slice this one piece at a time.

1. The grid is responsive to mouse clicks but not to keyboard commands
To work around that, your developers would have to add on each row an Edit
button, for example on the right most column.
2. When the user tabs to the Edit button and activates it, the cells on the
same row should hide their content, which would be included in spans using
display: none
3. Through CSS, the developers would show the input fields that they already
have in each cell. That mouse user is interacting with some type of an
element.
4. The focus would get placed on the left most cell in the row and the user
can tab through it. (Note that no need for tabindex="0" because when the
grid loads, the input fields are already there, but hidden using CSS.
5. When the user is done editing, the last input field in that grid is the
Save button.
6. The user presses the Save button and the data is moved from the input
fields to the spans using inline variables. The spans are shown and the
fields are hidden.
For the most part, that is probably how this grid is working behind the
scenes but only responsive to mouse clicks. So your developers don't have to
recreate the wheels, rather modify the input fields and the JS functions.

I hope that helps.






--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------