E-mail List Archives
Thread: Screen Reader Accessible Data Grid Widgets?
Number of posts in this thread: 5 (In chronological order)
From: Brandon Keith Biggs
Date: Tue, Feb 06 2018 7:18AM
Subject: Screen Reader Accessible Data Grid Widgets?
No previous message | Next message →
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/>;
From: Robert Fentress
Date: Tue, Feb 06 2018 7:56AM
Subject: Re: Screen Reader Accessible Data Grid Widgets?
← Previous message | Next message →
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 ADDRESS 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/>;
From: Brandon Keith Biggs
Date: Tue, Feb 06 2018 9:08AM
Subject: Re: Screen Reader Accessible Data Grid Widgets?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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/>;
> > > > > > > > >
From: Bryan Garaventa
Date: Fri, Feb 09 2018 1:58PM
Subject: Re: Screen Reader Accessible Data Grid Widgets?
← Previous message | Next message →
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 ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
From: Brandon Keith Biggs
Date: Sat, Feb 10 2018 1:06AM
Subject: Re: Screen Reader Accessible Data Grid Widgets?
← Previous message | No next message
Hello Bryan,
I can't say how excited I am that you created this already! I literally am
doing a happy dance because I've been using GSheets for our company
software, and I needed to spend time on writing the code and not the UI.
How difficult would it be to create AccDC for React (although I can
probably use the standalone for now)?
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Fri, Feb 9, 2018 at 12:58 PM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS REMOVED =
> 415.624.2709 (o)
> www.LevelAccess.com
>
>