WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Tables with clickable rows

for

From: Mallory
Date: May 6, 2021 3:01PM

Do you want something like Selectable Rows?
https://stommepoes.nl/work/tables/elements_table.html
(scroll to that heading)
or rows with links?
https://stommepoes.nl/work/tables/table.html

These are both super-old and were made as things to work with at an old job, but maybe they give you ideas.

For both of these kinds of tables, I try to keep regular table-table-ness as much as possible and just use JS to make mouset/touch a little more like what you're describing. I keep in mind that there is always an actionable element inside a th/td: a link or a checkbox or a button or something.

just a thought
_mallory

On Thu, May 6, 2021, at 4:46 PM, Mark Magennis wrote:
> 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
> > > archives at http://webaim.org/discussion/archives
> > > > > >