WebAIM - Web Accessibility In Mind

E-mail List Archives

Interactive table grids - Multiple questions

for

From: megha patangi
Date: Dec 19, 2022 5:39AM

Hello Web Aim team,

I am an Accessibility Specialist, and working with developers
currently on interactive tables (role="grid")
As per business requirements, there are complex use cases in our
tables and have following few questions with respect to it.

Question 1:
In our tables we currently do not have associated row headers and
technically it is also doesn't seem possible. We work in a low code
environment and the consumers of these tables can place any sort of
data in any column, thus, to identify unique data containing columns
to mark them as row headers is not possible. For this we have come up
with a solution to provide row number announced by SR while navigating
within the table grid using up/ down arrow keys.
These tables have radio button/ checkbox in their first column to
select rows, so is our approach to have row number is enough?
Can we even go with not having either row header or row number? Means
nothing read contextually for each radio button/ checkbox?

Question 2:
Now, for cells having multiple interactive/ non-interactive assets
inside it we are currently going with approach to let keyboard user
hit enter on cell, which opens a modal dialog and then interact or
read here (instead of going inside cell and then interacting). What we
are trying to solve is to bring consistency, and also making it easy
for screen reader users to read the content word by word, or character
by character which is not possible directly inside the cell.
But, for mouse pointer users, they can still interact directly with
cell content and modal never opens for them.
Is it fine to have different functionality for keyboard users versus
mouse pointer users, when each of them are able to enjoy complete
functionality, but in different ways?

Question 3:
As we move below the table rows using down arrow, new rows keep on
loading. And since table can have huge data, the entire table is not
rendered in DOM. Only the rows visible on UI along with few buffer
items above and below the visible rows are rendered on DOM.
Is any dynamic announcement of new rows being loaded required for
screen reader users? If yes what can be best approach to meet
accessibility requirements?

These are all for now.
Looking for help from experts.

Thank you,Megha