WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with clickable rows

for

From: glen walker
Date: May 5, 2021 3:46PM

I would not use the grid role unless your table behaves like a spreadsheet
with editable cells. It doesn't sound like that's your behavior.

What happens when you select a row in the table?

You could have the first column be a checkbox for selection and that would
be the only keyboard focusable element for the row. You can get fancy with
CSS and cause the entire row to be highlighted when you tab to the checkbox.

You could still use an anchor tag but you have to play tricks to make it
appear like it spans multiple columns. But an anchor isn't the right
semantic element unles clicking on the row navigates you to another page.


On Wed, May 5, 2021 at 2:52 PM Renato Iwashima < <EMAIL REMOVED> > wrote:

> Hi,
>
> What's the best/recommended way to create data tables where each row is
> entirely focusable and clickable?
>
> Looking at stackoverflow there's plenty of answers that disregard
> accessibility. The only one I found that makes sense uses aria roles with
> grid, row, and gridcell which doesn't use the <table> tag anymore. Is this
> a good approach? This problem comes from the fact that it is invalid to
> wrap table rows with an anchor tag.
>
> Any help is appreciated.
>
> Renato
> > > > >