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


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
Isabel Holdsworth
Sent: Monday, September 10, 2018 9:20 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Table of selectable records

Hi all,

One of our pages contains a lengthy sortable table, where each row
represents an editable record from a database.

Does anyone have an example of the best way of making such a table
accessible?

It looks visually like a spreadsheet. Should it behave like one from a
keyboard perspective? Should it be possible to traverse the table using the
arrow keys, and only have the Tab key move into and out of the table itself?
Currently the records are clickable but can't receive focus, which isn't
acceptable. But for each cell to be focusable using the Tab key would
prohibit all but the most determined keyboard users from getting to the
important content after the table.

I think that's probably the way to go, plus possibly have a "Select row"
button at the start of each row, but if there's a better way then this is
the place to ask :-)

Thanks as always, Isabel
http://webaim.org/discussion/archives