Misleading semantic interpretation of display: table

[alexlehner86]

Steps to reproduce:

• Use Chrome or Edge browser
• Open a website that uses the CSS attribute "display: table" to create a layout table for visually positioning the content. For example: This website uses "display: table" to position the h1 "Sozialversicherung neu", a print button (label "DRUCKEN") and an image (see screenshot 1 at the end of the post).
• Navigate to the described content with NVDA.

Actual behavior:

When navigating the content in the layout table with NVDA, the screen reader announces the content as a table element. This can be confusing for screen reader users as the content does not represent a data table.

Expected behavior:

As far as I know, “display: table” was specifically created to allow web developers to design a table layout without defining the content as a table semantically. My proposal would be: NVDA should only present content as a table if the HTML table element or role=”table” is used.

When using NVDA with Firefox browser, content with "display: table" is already not announced as a table. This is also the information presented by the Accessibility Inspector feature of Firefox Dev Tools (see screenshot 2 at the end of the post). According to the accessibility inspector, the div container with “display: table” has the role “section”, not “table”. So this is another indication that “display: table” should not be interpreted as having semantic meaning.

System configuration

NVDA installed/portable/running from source:

NVDA is installed

NVDA version:

2020.3

Windows version:

Microsoft Windows 10 Enterprise, Version 10.0.19042 Build 19042

Name and version of other software in use when reproducing the issue:

The issue ocurred with Google Chrome Version 90.0.4430.212 and Microsoft Edge Version 91.0.864.37. In Firefox 87.0 the issue did not occur.

Other information about your system:

not relevant

Other questions

Does the issue still occur after restarting your computer?

Yes

Have you tried any other versions of NVDA? If so, please report their behaviors.

No

If add-ons are disabled, is your problem still occurring?

Yes

Does the issue still occur after you run the COM Registration Fixing Tool in NVDA's tools menu?

Did not try

Screenshots

[XLTechie]

Alexander Lehner wrote:

When navigating the content in the layout table with NVDA, the screen reader announces the content as a table element. This can be confusing for screen reader users as the content does not represent a data table.

What happens if you turn off the "include layout tables" option under NVDA's browse mode settings? (NVDA+ctrl+b, alt+a, space, enter)

I believe that setting is meant to resolve this issue.

Although, whether on or off, I'm not sure you should be seeing different results in Firefox and Chromium browsers, so that may still be a bug, even if the option helps.

NVDA version: 2020.3

Please, when submitting reports, test with the latest stable version, which in this case is 2020.4. You might also try the currently published beta, if any, which in this case is 2021.1beta1.

[alexlehner86]

Thank you for the quick reply. I updated my installed NVDA application to 2020.4 and checked the "include layout tables" option. It was already disabled. I've repeated the tests with Chrome, Edge and Firefox and the results are the same as described in my initial post.

[Adriani90]

I don' think this should be excluded from tables rendering in NVDA. This might break lots of examples where this should be treated like a table. Note for example this post, even though it is recommended to use

or grids or treegrids, there are still alot of websites using css styled tables. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/table_role

This table for example works in Chrome with NVDA but not in Firefox. https://codepen.io/marcellkiss/pen/Eyyomd

Why don't you position the content that should not be a table with flexbox alignment like inline elements or vertical_alignment rather thaan using display:table? See this link for example: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment

cc: @jcsteh

jcsteh commented 1 year ago

First, it's concerning to me that anyone is seeing display: table show up as a data table in Chromium. I can't reproduce that. If you have Include layout tables turned off in NVDA, you should never see these as tables. I'm not sure why we're seeing different results here.

Second, Firefox previously treated display: table as layout tables. After a lot of discussion with various stakeholders, it was agreed that this is undesirable - CSS is about visual presentation, not semantics - and so this behaviour was removed. See https://bugzilla.mozilla.org/show_bug.cgi?id=1007975.

Note that you can still have a display: table treated as a data table if you wish by using role="table", etc. The author just needs to be explicit about it.

Adriani90 commented 1 year ago

@jcsteh also in Chromium if you disable layout tables you don't see it anymore. but in Firefox for example the codepen that i posted here is not recognized as table iven when layout tables are enabled.

I found a very interesting tutorial for creating daata tables with display:table and div tag. And this seems to be very common also on stack overflow. Lots of people seem to do it because it gives better performance and its more responsive especially for large tables when displaying them on different devices. https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/

So instead of banning the display:table from layout tables all together, as it is now in Firefox, could we not use more heuristics in NVDA to really recognize layout tables?

Like for example: Layout table with display:table

1. Does not have rows and columns defined
2. Is not included into a div tag
3. Does not have row and column headers.

If first two conditions are met, then it should be considered layout table. The third condition is hard to be assumed as standard but is somehow detuctible if both previous conditions are met. If display:table comes in conjunction with div tag and rows and columns defined, then the probability is quite high that we talk about a data table. If it has row headers and column headers, then it is quite sure that it is a data table.

jcsteh commented 1 year ago

Honestly, I don't understand the point of that article. They're using divs with table styles, but that's effectively the same as using table tags, which have implicit table styles. The only difference is that they apply width: 100%, but they could just as easily do that with table tags.

More commonly, authors now create responsive tables by using non-table display styles. In fact, most of the reason for Firefox (and to a large extent Chrome) shifting away from having CSS impact table semantics is based on feedback from authors and users. Previously, a table with display: block wasn't treated as a table because we made decisions purely based on information from the layout/style engine. This caused problems in the real world because of responsive tables. So, we now use semantic information rather than layout/style information. See https://bugzilla.mozilla.org/show_bug.cgi?id=1005271.

Firefox already has heuristics to detect if an HTML table is a layout table or not based on row/col counts, headers, etc. However, by definition, a CSS table is almost certainly a layout table, since CSS is all about layout. If it is intended for data, it is very easy to override this using ARIA.

Adriani90 commented 1 year ago

@jcsteh thanks for the good information, let's hope the web authors will follow the approach that is promoted by browsers. I also think those css style tables appear not that often in practice, but I will try to find some examples in the wild.

jendemes commented 1 year ago

Also encountering this in Chrome despite having "include layout tables" unchecked (also happens when it is checked -the setting doesn't change the behavior). The example is on an internal site, so I'm unable to share it.

• OS: Windows 10.0.19045
• Browser: Chrome 112.0.5615.121
• NVDA version: 2023.1.0.27913

This behavior seems counterintuitive to me in terms of what display: table is supposed to do: present non-tabular data in a tabular format. If something has display: table, there is the implication that it won't make sense if treated like a semantic table.

At the very least, the setting to include/not include layout tables doesn't seem to be respected, which I believe is a recent regression.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[jcsteh]

First, it's concerning to me that anyone is seeing display: table show up as a data table in Chromium. I can't reproduce that. If you have Include layout tables turned off in NVDA, you should never see these as tables. I'm not sure why we're seeing different results here.

Second, Firefox previously treated display: table as layout tables. After a lot of discussion with various stakeholders, it was agreed that this is undesirable - CSS is about visual presentation, not semantics - and so this behaviour was removed. See https://bugzilla.mozilla.org/show_bug.cgi?id=1007975.

Note that you can still have a display: table treated as a data table if you wish by using role="table", etc. The author just needs to be explicit about it.

[Adriani90]

@jcsteh also in Chromium if you disable layout tables you don't see it anymore. but in Firefox for example the codepen that i posted here is not recognized as table iven when layout tables are enabled.

I found a very interesting tutorial for creating daata tables with display:table and div tag. And this seems to be very common also on stack overflow. Lots of people seem to do it because it gives better performance and its more responsive especially for large tables when displaying them on different devices. https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/

So instead of banning the display:table from layout tables all together, as it is now in Firefox, could we not use more heuristics in NVDA to really recognize layout tables?

Like for example: Layout table with display:table

1. Does not have rows and columns defined
2. Is not included into a div tag
3. Does not have row and column headers.

If first two conditions are met, then it should be considered layout table. The third condition is hard to be assumed as standard but is somehow detuctible if both previous conditions are met. If display:table comes in conjunction with div tag and rows and columns defined, then the probability is quite high that we talk about a data table. If it has row headers and column headers, then it is quite sure that it is a data table.

[jcsteh]

Honestly, I don't understand the point of that article. They're using divs with table styles, but that's effectively the same as using table tags, which have implicit table styles. The only difference is that they apply width: 100%, but they could just as easily do that with table tags.

More commonly, authors now create responsive tables by using non-table display styles. In fact, most of the reason for Firefox (and to a large extent Chrome) shifting away from having CSS impact table semantics is based on feedback from authors and users. Previously, a table with display: block wasn't treated as a table because we made decisions purely based on information from the layout/style engine. This caused problems in the real world because of responsive tables. So, we now use semantic information rather than layout/style information. See https://bugzilla.mozilla.org/show_bug.cgi?id=1005271.

Firefox already has heuristics to detect if an HTML table is a layout table or not based on row/col counts, headers, etc. However, by definition, a CSS table is almost certainly a layout table, since CSS is all about layout. If it is intended for data, it is very easy to override this using ARIA.

[Adriani90]

@jcsteh thanks for the good information, let's hope the web authors will follow the approach that is promoted by browsers. I also think those css style tables appear not that often in practice, but I will try to find some examples in the wild.

[jendemes]

Also encountering this in Chrome despite having "include layout tables" unchecked (also happens when it is checked -the setting doesn't change the behavior). The example is on an internal site, so I'm unable to share it.

• OS: Windows 10.0.19045
• Browser: Chrome 112.0.5615.121
• NVDA version: 2023.1.0.27913

This behavior seems counterintuitive to me in terms of what display: table is supposed to do: present non-tabular data in a tabular format. If something has display: table, there is the implication that it won't make sense if treated like a semantic table.

At the very least, the setting to include/not include layout tables doesn't seem to be respected, which I believe is a recent regression.