Improve accessibility: using a <table> element at the top-level

My organization is using react-virtualized with an application that must support screenreaders using JAWS. While react-virtualized has excellent support for keyboard navigation (tab-index), and adds the proper role/aria-labels, it is still not properly read by JAWS or mac voiceover. Problems:

• “table mode” is not usable. Unable to read/navigate cell-by-cell
• Interactive elements (links, buttons, etc) are not read by the screenreader, even when tabbable
• Screenreader will not provide context on number of columns/rows, and where you are currently focused within the table.

In the end, it seems that no matter what aria-labels and roles are used, a screenreader won’t read and give the same functionality as a full on table. Changing the top level element to <table class="ReactVirtualized__Table" role="grid"> resolved all three of my problems. Note: all children remain as <div>s, so no <tr>, <td> etc need be used.

Example audio from Jaws with the current react-virtualized implementation: https://drive.google.com/open?id=0BxS1c0ZghPGvcGdjQ1FqRHpYMjg

Example audio from Jaws with the new <table> implementation: https://drive.google.com/open?id=0BxS1c0ZghPGvaC03VGktZ0dXMlE

My question to you is: Is there any reason this would be a bad idea that I haven’t considered? If not, then I’ll open a PR to the library to make this change.

[cerinman]

We were running into a similar issue with screen readers not reading but as soon as we added role="Tabpanel" to the List component everything worked with no issues. Noting here incase it helps someone else. 👍

[lmcnamara-SMAR]

My organization is using react-virtualized with an application that must support screenreaders using JAWS. While react-virtualized has excellent support for keyboard navigation (tab-index), and adds the proper role/aria-labels, it is still not properly read by JAWS or mac voiceover. Problems:

• “table mode” is not usable. Unable to read/navigate cell-by-cell
• Interactive elements (links, buttons, etc) are not read by the screenreader, even when tabbable
• Screenreader will not provide context on number of columns/rows, and where you are currently focused within the table.

In the end, it seems that no matter what aria-labels and roles are used, a screenreader won’t read and give the same functionality as a full on table. Changing the top level element to <table class="ReactVirtualized__Table" role="grid"> resolved all three of my problems. Note: all children remain as <div>s, so no <tr>, <td> etc need be used.

Example audio from Jaws with the current react-virtualized implementation: https://drive.google.com/open?id=0BxS1c0ZghPGvcGdjQ1FqRHpYMjg

Example audio from Jaws with the new <table> implementation: https://drive.google.com/open?id=0BxS1c0ZghPGvaC03VGktZ0dXMlE

My question to you is: Is there any reason this would be a bad idea that I haven’t considered? If not, then I’ll open a PR to the library to make this change.

Are you use the Table or Grid primitive to render your table?