WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Screen Reader Accessible Data Grid Widgets?

for

From: Robert Fentress
Date: Feb 6, 2018 7:56AM

Thanks for exploring the existing state space. Sounds like an opportunity
to contribute to the community by using the ARIA Best Practices demo to
create a React component that actually works as recommended. ;-) I'm
assuming the Best Practices example actually works?

On Feb 6, 2018 9:18 AM, "Brandon Keith Biggs" < <EMAIL REMOVED> >
wrote:

Hello,

I am desperately looking for an accessible grid, preferably in React, that
acts like:

https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-
20171214/examples/grid/dataGrids.html



I have looked at over 20 grids and datatables and none have this ability.
Does anyone have any suggestions? Here are the ones I have looked at:



React Data Grid:

https://github.com/adazzle/react-data-grid

Keyboard navigation works kind of, but NVDA does not read any cell contents
and the grid itself does not act as a table for backup. There is keyboard
navigation though!



React Table:

https://react-table.js.org/#/story/readme

Doesn't even use table elements. No table and no keyboard functionality.



React-Virtualized:

https://github.com/bvaughn/react-virtualized

The table says 0 columns and 0 rows, does not allow for table navigation
and there is no way to move through the table using the arrow keys or tab
key.



React-spreadsheet:

https://github.com/felixrieseberg/React-Spreadsheet-Component

The table says the correct number of columns and rows, but there is no way
to navigate the table, either through using table navigation or by passing
keyboard input through to the application.



Orb:

http://orbjs.net/

The table looks right, but when I try to move through it, I am jumped all
over and can't figure out what is being presented. My guess this is because
of multiple tables in one table.



React-bootstrap-table:

https://github.com/AllenFang/react-bootstrap-table

This is a table I can navigate, but not using the arrow keys like a grid
and the header row is not attached to the table in any way, so NVDA does
not read it.



React-json-data table:

https://github.com/arqex/react-json-table

This table is perfect as a table, but it does not allow for navigation like
a grid which is what I'm looking for.



React-Pivot:

https://github.com/davidguttman/react-pivot

This is a perfect table, but it does not have grid functionality.



react-structured-filter:

https://github.com/summitroute/react-structured-filter

This is a nearly perfect table, but there is a next button inside the table
and I think it should be outside the table. But still, this is not a grid.



Reactabular:

https://reactabular.js.org/#/

This is a perfect example of a table. There doesn't seem to be any grid
functionality though.



Fixed-Data-Table-2:

https://github.com/schrodinger/fixed-data-table-2

Neither table functionality or grid functionality.



react-infinite-grid:

https://github.com/ggordan/react-infinite-grid

No table or grid functionality at all.



react-datatable:

https://github.com/wmira/react-datatable

There is great table functionality, but the headers are not properly
marked. There is also no grid functionality.



react-sortable-table:

https://github.com/Rudolph-Miller/react-sortable-table

Perfect table functionality, but is not a grid and does not have grid
functionality.



react-spreadsheet:

https://github.com/carlosvillu/react-spreadsheet

This feels like a normal table, but there is no grid functionality like
keyboard navigation. There is also no editing cells using the keyboard. The
fact that the table is really a table makes this the best grid example so
far though. There id no header, so I wasn't able to test if it worked at a
proper table.



react-data-components:

https://github.com/carlosrocha/react-data-components

Perfect table example, but no grid functionality.



Reactable:

https://github.com/glittershark/reactable

Almost perfect example of a table, but there is a footer on the table that
is just a bunch of random numbers. There is also no grid functionality.



backbone-react-ui:

https://github.com/securingsincity/backbone-react-ui

Perfect example of a table, but no grid functionality. Also, there is an
unlabeled search button and the edit buttons don't seem to work.



Griddle:

https://github.com/GriddleGriddle/Griddle

Perfect table example, but no grid functionality. There is some impressive
customizability though.



react-table-sorter-demo:

https://github.com/bgerm/react-table-sorter-demo

Perfect table functionality, but no gird capabilities.



I found most of these from:

https://react.rocks/tag/DataTable?show@



Thanks,

Brandon Keith Biggs <http://brandonkeithbiggs.com/>;