WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Tables with clickable rows

for

From: Mark Magennis
Date: May 6, 2021 8:46AM

Renato,

You have to be very careful when using the grid role because basically you no longer have a table that behaves in the expected way for a <table> with a screen reader. Also, it may disable the screen reader's general page navigation and other functionality. Using JAWS or NVDA, if you arrow into a grid in browse mode everything works as normal for a table. But when you Tab into the grid (using the default screen reader settings) the screen reader enters application mode and the standard table navigation using Ctrl+Alt+Arrow keys no longer work. Plus, standard screen reader commands like 'h' to jump to the next heading or Ctrl+Home to jump to the top of the page no longer work. The same happens if you arrow into the table (which doesn't trigger application mode) but then use a widget within it that does trigger application mode, such as a dropdown menu (role="menu"). When you close the menu, you are back in the grid but still in application mode so normal screen reader functionality is supressed. To get back your standard table navigation and other screen reader functionality, you have to manually exit application mode. A lot of screen reader users don't know how to do this, and don't even know what application mode is. So in practice, if you use a grid instead of a table, you will probably need to provide instructions for screen reader user explaining this and telling them how to recover their normal functionality. This isn't ideal, so you should avoid using grids for data tables unless you need functionality that a <table> can't support.

Mark

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Renato Iwashima
Sent: 05 May 2021 21:52
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] [WebAIM] Tables with clickable rows

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