WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table of selectable records

for

From: Isabel Holdsworth
Date: Sep 24, 2018 4:53AM

Yes JP, that's very helpful indeed. Thanks for taking the time to
write it out. I've created editable tables for CRM systems, but I
haven't instructed another developer on how to do it, so I'll
plagiarise your description and hopefully our tables will be perfectly
accessible.

Or perhaps they'll choose to wait for Tenon's accessible React
components and see what they have to offer.

Exciting times!

Thanks again, Isabel

On 11/09/2018, JP Jamous < <EMAIL REMOVED> > wrote:
> 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
> --------------------
>
>
>