WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Screen Reader Accessible Data Grid Widgets?

for

From: Brandon Keith Biggs
Date: Feb 6, 2018 9:08AM

Hello,
Yes,
https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-
works pretty well. There are some problems, but apparently they are NVDA
bugs.
I would create one, but I don't feel competent to build a good quality grid
or even follow the practices correctly. Is there a particular widget people
tend to use for data grids?
Thanks,


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

On Tue, Feb 6, 2018 at 6:56 AM, Robert Fentress < <EMAIL REMOVED> > wrote:

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