WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with clickable rows

for

From: Renato Iwashima
Date: May 5, 2021 4:05PM

Yes, in my case clicking on a row would take to another page. It's a master
list/detail flow. I'm assuming the tricks you mentioned is to expand the
anchor on top of the entire row with css?

On Wed, May 5, 2021 at 4:47 PM glen walker < <EMAIL REMOVED> > wrote:

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