WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Screen Reader Accessible Data Grid Widgets?

for

From: Brandon Keith Biggs
Date: Feb 10, 2018 1:06AM

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 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 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/>;
> > > at http://webaim.org/discussion/archives
> > > > > >