WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Screen Reader Accessible Data Grid Widgets?

for

From: Bryan Garaventa
Date: Feb 9, 2018 1:58PM

Hi,
Are you referring to functionality like this?
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Data%20Grids/ARIA%20Data%20Grid%20(Dynamic)/demo.htm


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Brandon Keith Biggs
Sent: Tuesday, February 06, 2018 6:18 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Screen Reader Accessible Data Grid Widgets?

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