'Fire Fox does not count table rows in NVDA Screen Reader, but does in Chrome

I am trying to make an accessible expandable table (taking this as inspiration: https://fuschia-stretch.glitch.me/ , check out "View souce"), but the NVDA screen reader do not read the number of columns in Fire Fox, but reads them in Chrome. Here are some examples:

// It seems like it is this block that is causing it to not count in Fire Fox, but it counts in Chrome, what can the reason be? Or how to solve this?
tr {
  display: flex;
  flex-flow: row wrap;
}

Thank you for all help

javascriptcssreactjswcag


Solution 1:[1]

The CSS display property for table elements should never be changed from the default.

  • A <table> has display:table
  • A <tr> has display:table-row
  • A <td> has display:table-cell

If you change the default, a screen reader doesn't know the element is part of a table anymore. You're getting lucky this is working on Chrome.

There's even a note about this in the example you posted. The first bullet point says:

  • ARIA table roles are attached to all native elements. Without this, some screen readers (VO) would not read the table correctly, due to display: flex being used.

However, the example seems to work around that by specifically specifying the role attribute for the table, rows, and cells.

I do hear rows/cols in Firefox but it says 2 rows and 1 column whereas Chrome (correctly) says 4 rows and 5 columns. (There's a hidden 5th column that you can't visibly see but the screen reader "sees" it.)

In the code inspector for Firefox, if I disable the display and flex* related CSS items for the table elements, then the table reads correctly.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 slugolicious

Related Questions