ARIA Grid Not Recognized Due to Extra div

[MABennett3]

We are using a widget that generates 2 <table> elements where the first <table> is used for the column headers and the second <table> contains the data cells so that the data values are scrollable while the column headers remain visible. For screen readers to view these as a single table and navigate it accordingly, we applied a method outlined by The Paciello Group (https://www.paciellogroup.com/blog/2014/10/notes-on-fixing-incorrect-table-structure-using-aria/) to use ARIA.

The tables work using JAWS 18 paired with IE 11, Firefox, and Chrome. NVDA works with Chrome, partially works with Firefox, and doesn’t work at all with IE 11 so we believe the issue to be with NVDA.

For styling purposes and to handle the scrollable section, the widget we are using wraps each of the two <table> elements with 2 <div> elements (both of which only contain styling and do not contain any semantic information such as an ARIA role). These extra <div>’s appear to be what’s creating the problem for NVDA while in Firefox. If those extra <div>’s are present, then NVDA will not correctly recognize the table and allow for table reading commands (Ctrl + Alt + Arrow Keys) to navigate the information. If those extra <div>’s are removed, then the table will be recognized correctly and table reading commands work just fine.

The attached test page contains 2 tables: one with the extra <div>’s present and one with the extra <div>’s removed. If you open the test page in Firefox while running NVDA, then you will experience that the first table is not announced correctly and the second one is.

The <div>’s do not contain any semantic meaning (and would break the page to remove them) so it appears to be a bug that those <div>’s are creating problems.

NVDA-Table-Example.zip

[bimdaya]

I face the same problem and I use role inside <div> tags instead of <tables>. The table header and the body are generated separately.
The Header contains 2 columns wrapped with one <div> tag and therefore it doesn't map column headers with gridcells correctly in Firefox.

table_structure.html.zip

[Adriani90]

I can somehow reproduce an issue like this with NVDA 2019.1.1 and Firefox 66.0.3.

In the first example provided by @MABennett3, the second table works as expected. No issues. But while navigating in the first table, I get following error in the log file:

IO - inputCore.InputManager.executeGesture (00:40:44.621):
Input: kb(laptop):alt+control+upArrow
IO - inputCore.logTimeSinceInput (00:40:44.644):
0.023 sec since input
IO - speech.speak (00:40:44.644):
Speaking [u'Tabellenrand']
ERROR - scriptHandler.executeScript (00:40:44.657):
error executing script: <bound method Gecko_ia2.script_previousRow of <virtualBuffers.gecko_ia2.Gecko_ia2 object at 0x051CC090>> with gesture u'Alt+Strg+Pfeiltaste nach oben'
Traceback (most recent call last):
  File "scriptHandler.pyc", line 187, in executeScript
  File "documentBase.pyc", line 179, in script_previousRow
  File "documentBase.pyc", line 167, in _tableMovementScriptHelper
  File "virtualBuffers\gecko_ia2.pyc", line 337, in _getTableCellAt
LookupError

cc: @jcsteh

[Adriani90]

In the second example by @bud93411 the header seems to be splited from the table and table navigation command cannot be used. In fact NVDA does not recognize it as a table at all.

Starting with 1pt (first cell under the header), while navigating with table navigation commands, it is not possible to move between the cells. In the log there is following error:

IO - inputCore.InputManager.executeGesture (00:55:30.789):
Input: kb(laptop):alt+control+downArrow
ERROR - scriptHandler.executeScript (00:55:30.832):
error executing script: <bound method Gecko_ia2.script_nextRow of <virtualBuffers.gecko_ia2.Gecko_ia2 object at 0x04E9B790>> with gesture u'Alt+Strg+Pfeiltaste nach unten'
Traceback (most recent call last):
  File "scriptHandler.pyc", line 187, in executeScript
  File "documentBase.pyc", line 174, in script_nextRow
  File "documentBase.pyc", line 161, in _tableMovementScriptHelper
  File "virtualBuffers\gecko_ia2.pyc", line 341, in _getNearestTableCell
  File "documentBase.pyc", line 138, in _getNearestTableCell
  File "virtualBuffers\gecko_ia2.pyc", line 331, in _getTableCellAt
AttributeError: 'Dynamic_BrokenFocusedStateDocumentMozillaIAccessib' object has no attribute 'IAccessibleTableObject'

[Adriani90]

In Google chrome table navigation is not possible in any of the examples. In the second example I get the same error like in Firefox.

[jcsteh]

Regarding @MABennett3's test case, this is a Firefox bug. NVDA relies on Firefox to expose table semantics. (In contrast, I guess JAWS must be building its own idea of the table.) The intervening divs are causing problems for Firefox's table accessibility code.

The ARIA spec seems to suggest that required owned elements can be DOM descendants, not just DOM children, so I guess this should be fixed in Firefox. That said, you can work around this easily enough by putting role="presentation" on the intervening divs, thus explicitly marking them as presentational.

[jcsteh]

Same underlying issue as #927, so closing as duplicate.