I was recently reviewing a website which makes extensive use of CSS 'display: table', 'display: table-row' and 'display: table-cell' properties for layout purposes. These elements are nested several times to create a grid layout structure.

I noticed using Chrome, that NVDA would announce these elements as, for example, 'Table, Row minus one, column one'.

I think this could be related to an issue described here: https://www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/ however, I was unable to reproduce with the example code used in this article.

I am unsure whether this is truly a bug or is intentional behaviour. I noticed adding a 'role=presentation' attribute to the elements seemed to stop Chrome from announcing the elements, though I am unsure whether this would be the recommended approach to dealing with the issue.

Steps to reproduce:

Visit demo page: https://nvda-display-table-issue-9760.netlify.app/
Use keyboard tab key to navigate to 'Your name' field.

Actual behavior:

Using Chrome, NVDA announces the elements created using 'display: table', 'display: table-row', 'display: table-cell'

Expected behavior:

Using Firefox, Internet Explorer 11 or MS Edge browsers, these elements are not announced to the user.

System configuration

NVDA installed/portable/running from source:

Installed

NVDA version:

2019.1.1

Windows version:

Windows 10

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

Chrome 75.0.3770.90
Internet Explorer 11
MS Edge (40.15063.674.0)
Firefox 67.0.2

Other information about your system:

Other questions

Does the issue still occur after restarting your PC?

Yes

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

No