WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Should NVDA announce "table" when it encounters CSS display:table ?

for

Number of posts in this thread: 8 (In chronological order)

From: glen walker
Date: Tue, Apr 20 2021 2:26PM
Subject: Should NVDA announce "table" when it encounters CSS display:table ?
No previous message | Next message →

I found a page that has a <div style="display:table">. On Chrome, when I
tab to an <input> contained in that <div>, NVDA announces "table" before it
announces the input field. JAWS does not say "table".

If I view the accessibility properties in Chrome, it says the role is
LayoutTable. A LayoutTable is not a real role with regards to ARIA roles.

Even though NVDA says "table", you can't use any table navigation keys.

I find this quite confusing. Should Chrome not be surfacing that this is a
layout table? role="table" isn't specified anywhere. But whether a layout
table is correct or not, JAWS seems to ignore it but NVDA does not.

Firefox does not announce "table" so there's no confusion there.

I took a quick look at NVDA bugs in github but didn't see anything offhand,
but then I didn't look very hard.

This simple example shows the problem. The two button elements are only
there to give me tab stops before and after the input field.

<button>foo</button>
<div style="display:table">
<input>
</div>
<button>foo</button>

From: Steve Green
Date: Tue, Apr 20 2021 3:49PM
Subject: Re: Should NVDA announce "table" when it encounters CSSdisplay:table ?
← Previous message | Next message →

As far as I can tell, browsers are supposed to expose the node as a table.

I expect that JAWS is not announcing it as a table because one of its heuristics is that a data table contains at least two rows and two columns, which your example does not. If you built a table of that size using div elements and the relevant table-cell and table-row roles, JAWS would probably announce it as a table.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: 20 April 2021 21:27
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Should NVDA announce "table" when it encounters CSS display:table ?

I found a page that has a <div style="display:table">. On Chrome, when I tab to an <input> contained in that <div>, NVDA announces "table" before it announces the input field. JAWS does not say "table".

If I view the accessibility properties in Chrome, it says the role is LayoutTable. A LayoutTable is not a real role with regards to ARIA roles.

Even though NVDA says "table", you can't use any table navigation keys.

I find this quite confusing. Should Chrome not be surfacing that this is a layout table? role="table" isn't specified anywhere. But whether a layout table is correct or not, JAWS seems to ignore it but NVDA does not.

Firefox does not announce "table" so there's no confusion there.

I took a quick look at NVDA bugs in github but didn't see anything offhand, but then I didn't look very hard.

This simple example shows the problem. The two button elements are only there to give me tab stops before and after the input field.

<button>foo</button>
<div style="display:table">
<input>
</div>
<button>foo</button>

From: Jim Bauer
Date: Tue, Apr 20 2021 4:02PM
Subject: Re: Should NVDA announce "table" when it encounters CSS display:table ?
← Previous message | Next message →

This is an open NVDA issue:
https://github.com/nvaccess/nvda/issues/9760

On 4/20/2021 3:26 PM, glen walker wrote:
> I found a page that has a <div style="display:table">. On Chrome, when I
> tab to an <input> contained in that <div>, NVDA announces "table" before it
> announces the input field. JAWS does not say "table".
>
> If I view the accessibility properties in Chrome, it says the role is
> LayoutTable. A LayoutTable is not a real role with regards to ARIA roles.
>
> Even though NVDA says "table", you can't use any table navigation keys.
>
> I find this quite confusing. Should Chrome not be surfacing that this is a
> layout table? role="table" isn't specified anywhere. But whether a layout
> table is correct or not, JAWS seems to ignore it but NVDA does not.
>
> Firefox does not announce "table" so there's no confusion there.
>
> I took a quick look at NVDA bugs in github but didn't see anything offhand,
> but then I didn't look very hard.
>
> This simple example shows the problem. The two button elements are only
> there to give me tab stops before and after the input field.
>
> <button>foo</button>
> <div style="display:table">
> <input>
> </div>
> <button>foo</button>
> > > >

From: Michael Ausbun
Date: Tue, Apr 20 2021 4:22PM
Subject: Re: Should NVDA announce "table" when it encountersCSSdisplay:table ?
← Previous message | Next message →

--_005_DM6PR02MB503441ECBAA5BF59D5ABF27B92489DM6PR02MB5034namp_
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: base64

Rm9yIHdoYXQgaXQgaXMgd29ydGgsDQpJbiB0aGUgSkFXUyBzZXR0aW5ncywgeW91IGNhbiB0dXJu
IG9uIHJlY29nbml0aW9uIG9mIGxheW91dCB0YWJsZXMsIHRob3VnaCBieSBkZWZhdWx0IEkgYmVs
aWV2ZSB0aGlzIG9wdGlvbiBpcyB0b2dnbGVkIG9mZi4NCkkgYWxtb3N0IG5ldmVyIGZpbmQgdGhl
beKApnBhcnRpY3VsYXJseSBoZWxwZnVsLCBzbyBJLCBhcyBhIHVzZXIsIHdvdWxkIHByZWZlciBs
YXlvdXQgdGFibGVzIHRvIGJlIGlnbm9yZWTigKZidXQgYXMgYW4gYWNjZXNzaWJpbGl0eSBwcm9m
ZXNzaW9uYWwsIEkgZG8gaGF2ZSB0aGUgc2V0dGluZyBvbuKApmZvciBhdXRoZW50aWNpdHkgc2Fr
ZXMuDQpSZXNwZWN0ZnVsbHksDQpNaWNoYWVsDQotLQ0KTWljaGFlbCBEdWFuZSBBdXNidW4sIE1B
LCBDUFdBIChIZSwgSGlzLCBIaW0pDQpBY2Nlc3NpYmlsaXR5IFNwZWNpYWxpc3QsIFByb2dyYW0g
RGV2ZWxvcG1lbnQsDQpVbml2ZXJzYWwgRGVzaWduIGFuZCBBY2Nlc3NpYmlsaXR5IFRlYW0NClJ1
c3RvbiwgTG91aXNpYW5hDQoNCldlc3Rlcm4gR292ZXJub3JzIFVuaXZlcnNpdHkNCjQwMDEgU291
dGggNzAwIEVhc3QsIFN1aXRlIDcwMA0KU2FsdCBMYWtlIENpdHksIFVUIDg0MTA3DQpNaWNoYWVs
LmF1c2J1bkB3Z3UuZWR1PG1haWx0bzpNaWNoYWVsLmF1c2J1bkB3Z3UuZWR1Pg0KDQoNCltJQUFQ
IENQV0Egc21hbGwgY2lyY3VsYXIgYmFkZ2UgYW5kIGhvcml6b250YWwgbmFtZSBsb2dvIGZvciBJ
bnRlcm5hdGlvbmFsIEFzc29jaWF0aW9uIG9mIEFjY2Vzc2liaWxpdHkgUHJvZmVzc2lvbmFscyAo
SUFBUCkgQ2VydGlmaWVkIFByb2Zlc3Npb25hbCBpbiBXZWIgQWNjZXNzaWJpbGl0eSAoQ1BXQSkg
Y3JlZGVudGlhbC4gVG8gdGhlIGxlZnQgaXMgYSBkYXJrIGJsdWUgY2lyY2xlIHdpdGggdGhyZWUg
bGluZXMgb2YgY2VudGVyZWQgd2hpdGUgdGV4dCB0aGF0IHJlYWQ6IElBQVAgQ2VydGlmaWVkIENQ
V0EuIFRoZXJlIGlzIGEgc21hbGxlciBzaWx2ZXIgY2lyY2xlIHRoYXQgc3Vycm91bmRzIHRoZSBk
YXJrIGJsdWUgaW5uZXIgY2lyY2xlIHRoYXQgZGVzaWduYXRlcyB0aGUgQ1BXQSBjcmVkZW50aWFs
IGNvbG9yIHNjaGVtZS4gVG8gdGhlIHJpZ2h0LCB0aHJlZSBsaW5lcyBvZiBkYXJrIGJsdWUgdGV4
dC4gVG9wIHRleHQgcmVhZHMgQ2VydGlmaWVkIFByb2Zlc3Npb25hbCwgc2Vjb25kIGxpbmUgcmVh
ZHMgaW4gV2ViIEFjY2Vzc2liaWxpdHksIHRoaXJkIGxpbmUgcmVhZHMgSW50ZXJuYXRpb25hbCBB
c3NvY2lhdGlvbiBvZiBBY2Nlc3NpYmlsaXR5IFByb2Zlc3Npb25hbHMuXTxodHRwczovL3d3dy5h
Y2Nlc3NpYmlsaXR5YXNzb2NpYXRpb24ub3JnL2Nwd2E+DQoNCltKQVdTIENlcnRpZmllZCwgMjAy
MF08aHR0cDovL3d3dy5mcmVlZG9tc2NpZW50aWZpYy5jb20vQ2VydGlmaWNhdGlvbj4NCg0KDQoN
Cg0KDQpGcm9tOiBXZWJBSU0tRm9ydW0gPHdlYmFpbS1mb3J1bS1ib3VuY2VzQGxpc3Qud2ViYWlt
Lm9yZz4gT24gQmVoYWxmIE9mIFN0ZXZlIEdyZWVuDQpTZW50OiBUdWVzZGF5LCBBcHJpbCAyMCwg
MjAyMSA0OjQ5IFBNDQpUbzogV2ViQUlNIERpc2N1c3Npb24gTGlzdCA8d2ViYWltLWZvcnVtQGxp
c3Qud2ViYWltLm9yZz4NClN1YmplY3Q6IFJlOiBbV2ViQUlNXSBTaG91bGQgTlZEQSBhbm5vdW5j
ZSAidGFibGUiIHdoZW4gaXQgZW5jb3VudGVycyBDU1MgZGlzcGxheTp0YWJsZSA/DQoNCltFWFRF
Uk5BTCBFTUFJTF0gV0FSTklORzogVGhpcyBlbWFpbCBvcmlnaW5hdGVkIGZyb20gb3V0c2lkZSBv
ZiBXZXN0ZXJuIEdvdmVybm9ycyBVbml2ZXJzaXR5Lg0KDQpBcyBmYXIgYXMgSSBjYW4gdGVsbCwg
YnJvd3NlcnMgYXJlIHN1cHBvc2VkIHRvIGV4cG9zZSB0aGUgbm9kZSBhcyBhIHRhYmxlLg0KDQpJ
IGV4cGVjdCB0aGF0IEpBV1MgaXMgbm90IGFubm91bmNpbmcgaXQgYXMgYSB0YWJsZSBiZWNhdXNl
IG9uZSBvZiBpdHMgaGV1cmlzdGljcyBpcyB0aGF0IGEgZGF0YSB0YWJsZSBjb250YWlucyBhdCBs
ZWFzdCB0d28gcm93cyBhbmQgdHdvIGNvbHVtbnMsIHdoaWNoIHlvdXIgZXhhbXBsZSBkb2VzIG5v
dC4gSWYgeW91IGJ1aWx0IGEgdGFibGUgb2YgdGhhdCBzaXplIHVzaW5nIGRpdiBlbGVtZW50cyBh
bmQgdGhlIHJlbGV2YW50IHRhYmxlLWNlbGwgYW5kIHRhYmxlLXJvdyByb2xlcywgSkFXUyB3b3Vs
ZCBwcm9iYWJseSBhbm5vdW5jZSBpdCBhcyBhIHRhYmxlLg0KDQpTdGV2ZSBHcmVlbg0KTWFuYWdp
bmcgRGlyZWN0b3INClRlc3QgUGFydG5lcnMgTHRkDQoNCg0KLS0tLS1PcmlnaW5hbCBNZXNzYWdl
LS0tLS0NCkZyb206IFdlYkFJTS1Gb3J1bSA8d2ViYWltLWZvcnVtLWJvdW5jZXNAbGlzdC53ZWJh
aW0ub3JnPG1haWx0bzp3ZWJhaW0tZm9ydW0tYm91bmNlc0BsaXN0LndlYmFpbS5vcmc+PiBPbiBC
ZWhhbGYgT2YgZ2xlbiB3YWxrZXINClNlbnQ6IDIwIEFwcmlsIDIwMjEgMjE6MjcNClRvOiBXZWJB
SU0gRGlzY3Vzc2lvbiBMaXN0IDx3ZWJhaW0tZm9ydW1AbGlzdC53ZWJhaW0ub3JnPG1haWx0bzp3
ZWJhaW0tZm9ydW1AbGlzdC53ZWJhaW0ub3JnPj4NClN1YmplY3Q6IFtXZWJBSU1dIFNob3VsZCBO
VkRBIGFubm91bmNlICJ0YWJsZSIgd2hlbiBpdCBlbmNvdW50ZXJzIENTUyBkaXNwbGF5OnRhYmxl
ID8NCg0KSSBmb3VuZCBhIHBhZ2UgdGhhdCBoYXMgYSA8ZGl2IHN0eWxlPSJkaXNwbGF5OnRhYmxl
Ij4uIE9uIENocm9tZSwgd2hlbiBJIHRhYiB0byBhbiA8aW5wdXQ+IGNvbnRhaW5lZCBpbiB0aGF0
IDxkaXY+LCBOVkRBIGFubm91bmNlcyAidGFibGUiIGJlZm9yZSBpdCBhbm5vdW5jZXMgdGhlIGlu
cHV0IGZpZWxkLiBKQVdTIGRvZXMgbm90IHNheSAidGFibGUiLg0KDQpJZiBJIHZpZXcgdGhlIGFj
Y2Vzc2liaWxpdHkgcHJvcGVydGllcyBpbiBDaHJvbWUsIGl0IHNheXMgdGhlIHJvbGUgaXMgTGF5
b3V0VGFibGUuIEEgTGF5b3V0VGFibGUgaXMgbm90IGEgcmVhbCByb2xlIHdpdGggcmVnYXJkcyB0
byBBUklBIHJvbGVzLg0KDQpFdmVuIHRob3VnaCBOVkRBIHNheXMgInRhYmxlIiwgeW91IGNhbid0
IHVzZSBhbnkgdGFibGUgbmF2aWdhdGlvbiBrZXlzLg0KDQpJIGZpbmQgdGhpcyBxdWl0ZSBjb25m
dXNpbmcuIFNob3VsZCBDaHJvbWUgbm90IGJlIHN1cmZhY2luZyB0aGF0IHRoaXMgaXMgYSBsYXlv
dXQgdGFibGU/IHJvbGU9InRhYmxlIiBpc24ndCBzcGVjaWZpZWQgYW55d2hlcmUuIEJ1dCB3aGV0
aGVyIGEgbGF5b3V0IHRhYmxlIGlzIGNvcnJlY3Qgb3Igbm90LCBKQVdTIHNlZW1zIHRvIGlnbm9y
ZSBpdCBidXQgTlZEQSBkb2VzIG5vdC4NCg0KRmlyZWZveCBkb2VzIG5vdCBhbm5vdW5jZSAidGFi
bGUiIHNvIHRoZXJlJ3Mgbm8gY29uZnVzaW9uIHRoZXJlLg0KDQpJIHRvb2sgYSBxdWljayBsb29r
IGF0IE5WREEgYnVncyBpbiBnaXRodWIgYnV0IGRpZG4ndCBzZWUgYW55dGhpbmcgb2ZmaGFuZCwg
YnV0IHRoZW4gSSBkaWRuJ3QgbG9vayB2ZXJ5IGhhcmQuDQoNClRoaXMgc2ltcGxlIGV4YW1wbGUg
c2hvd3MgdGhlIHByb2JsZW0uIFRoZSB0d28gYnV0dG9uIGVsZW1lbnRzIGFyZSBvbmx5IHRoZXJl
IHRvIGdpdmUgbWUgdGFiIHN0b3BzIGJlZm9yZSBhbmQgYWZ0ZXIgdGhlIGlucHV0IGZpZWxkLg0K
DQo8YnV0dG9uPmZvbzwvYnV0dG9uPg0KPGRpdiBzdHlsZT0iZGlzcGxheTp0YWJsZSI+DQo8aW5w
dXQ+DQo8L2Rpdj4NCjxidXR0b24+Zm9vPC9idXR0b24+DQpfX19fX19fX19fX19fX19fX19fX19f
X19fX19fX19fX19fX19fX19fX19fX19fXw0KVG8gbWFuYWdlIHlvdXIgc3Vic2NyaXB0aW9uLCB2
aXNpdCBodHRwOi8vbGlzdC53ZWJhaW0ub3JnLzxodHRwOi8vbGlzdC53ZWJhaW0ub3JnPiBMaXN0
IGFyY2hpdmVzIGF0IGh0dHA6Ly93ZWJhaW0ub3JnL2Rpc2N1c3Npb24vYXJjaGl2ZXM8aHR0cDov
L3dlYmFpbS5vcmcvZGlzY3Vzc2lvbi9hcmNoaXZlcz4NCkFkZHJlc3MgbGlzdCBtZXNzYWdlcyB0
byB3ZWJhaW0tZm9ydW1AbGlzdC53ZWJhaW0ub3JnPG1haWx0bzp3ZWJhaW0tZm9ydW1AbGlzdC53
ZWJhaW0ub3JnPg0KX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19fX19f
X18NClRvIG1hbmFnZSB5b3VyIHN1YnNjcmlwdGlvbiwgdmlzaXQgaHR0cDovL2xpc3Qud2ViYWlt
Lm9yZy88aHR0cDovL2xpc3Qud2ViYWltLm9yZy8+DQpMaXN0IGFyY2hpdmVzIGF0IGh0dHA6Ly93
ZWJhaW0ub3JnL2Rpc2N1c3Npb24vYXJjaGl2ZXM8aHR0cDovL3dlYmFpbS5vcmcvZGlzY3Vzc2lv
bi9hcmNoaXZlcz4NCkFkZHJlc3MgbGlzdCBtZXNzYWdlcyB0byB3ZWJhaW0tZm9ydW1AbGlzdC53
ZWJhaW0ub3JnPG1haWx0bzp3ZWJhaW0tZm9ydW1AbGlzdC53ZWJhaW0ub3JnPg0K
--_005_DM6PR02MB503441ECBAA5BF59D5ABF27B92489DM6PR02MB5034namp_
Content-Type: image/png; name="image001.png"
Content-Description: image001.png
Content-Disposition: inline; filename="image001.png"; size=212;
creation-date="Tue, 20 Apr 2021 22:22:35 GMT";
modification-date="Tue, 20 Apr 2021 22:22:35 GMT"
Content-ID: <image001.png@01D73609.C0E270B0>
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAAbAAAABRCAMAAACE/wOLAAAAAXNSR0ICQMB9xQAAAANQTFRFAAAA
p3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAZdEVYdFNvZnR3YXJlAE1p
Y3Jvc29mdCBPZmZpY2V/7TVxAAAAOElEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAHcGiQEAAVO2oVUAAAAASUVORK5CYII=
--_005_DM6PR02MB503441ECBAA5BF59D5ABF27B92489DM6PR02MB5034namp_
Content-Type: image/png; name="image002.png"
Content-Description: image002.png
Content-Disposition: inline; filename="image002.png"; size=190;
creation-date="Tue, 20 Apr 2021 22:22:36 GMT";
modification-date="Tue, 20 Apr 2021 22:22:36 GMT"
Content-ID: <image002.png@01D73609.C0E270B0>
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAAGwAAABsCAMAAAC4uKf/AAAAAXNSR0ICQMB9xQAAAANQTFRFAAAA
p3o92gAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAZdEVYdFNvZnR3YXJlAE1p
Y3Jvc29mdCBPZmZpY2V/7TVxAAAAIklEQVRo3u3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAAAAeDct
/AABKxOv+wAAAABJRU5ErkJggg==
--_005_DM6PR02MB503441ECBAA5BF59D5ABF27B92489DM6PR02MB5034namp_--

From: Benjamin.Hofer@telekom.de
Date: Wed, Apr 21 2021 12:14AM
Subject: Re: Should NVDA announce "table" when itencountersCSSdisplay:table ?
← Previous message | Next message →

Hi, as stated before, layout tables are no "real" tables and thus aren't particularly announced by screen readers. Actually this is a feature of screen readers that layout tables are recognized and "ignored". JAWS, but also NVDA offers this setting to be toggled on/off: In NVDA go to settings > Browse Mode and search for the corresponding option for announcing layout tables, it should be toggled off by default.

Best
Benjamin


DEUTSCHE TELEKOM IT GMBH
Digital Transformation and Operations - Central Operation Services 02
Benjamin Hofer
DevOps Engineer
Gutenbergstraße 13, 96050 Bamberg
E-Mail: = EMAIL ADDRESS REMOVED =
www.telekom.de

ERLEBEN, WAS VERBINDET.

Die gesetzlichen Pflichtangaben finden Sie unter: https://www.telekom.com/pflichtangaben-dtit
GROSSE VERÄNDERUNGEN FANGEN KLEIN AN – RESSOURCEN SCHONEN UND NICHT JEDE E-MAIL DRUCKEN.


-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > Im Auftrag von Michael Ausbun
Gesendet: Mittwoch, 21. April 2021 00:23
An: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Betreff: Re: [WebAIM] Should NVDA announce "table" when it encounters CSS display:table ?

For what it is worth,
In the JAWS settings, you can turn on recognition of layout tables, though by default I believe this option is toggled off.
I almost never find them…particularly helpful, so I, as a user, would prefer layout tables to be ignored…but as an accessibility professional, I do have the setting on…for authenticity sakes.
Respectfully,
Michael
--
Michael Duane Ausbun, MA, CPWA (He, His, Him) Accessibility Specialist, Program Development, Universal Design and Accessibility Team Ruston, Louisiana

Western Governors University
4001 South 700 East, Suite 700
Salt Lake City, UT 84107
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >


[IAAP CPWA small circular badge and horizontal name logo for International Association of Accessibility Professionals (IAAP) Certified Professional in Web Accessibility (CPWA) credential. To the left is a dark blue circle with three lines of centered white text that read: IAAP Certified CPWA. There is a smaller silver circle that surrounds the dark blue inner circle that designates the CPWA credential color scheme. To the right, three lines of dark blue text. Top text reads Certified Professional, second line reads in Web Accessibility, third line reads International Association of Accessibility Professionals.]<https://www.accessibilityassociation.org/cpwa>

[JAWS Certified, 2020]<http://www.freedomscientific.com/Certification>;





From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Tuesday, April 20, 2021 4:49 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Should NVDA announce "table" when it encounters CSS display:table ?

[EXTERNAL EMAIL] WARNING: This email originated from outside of Western Governors University.

As far as I can tell, browsers are supposed to expose the node as a table.

I expect that JAWS is not announcing it as a table because one of its heuristics is that a data table contains at least two rows and two columns, which your example does not. If you built a table of that size using div elements and the relevant table-cell and table-row roles, JAWS would probably announce it as a table.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> On Behalf Of glen walker
Sent: 20 April 2021 21:27
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Subject: [WebAIM] Should NVDA announce "table" when it encounters CSS display:table ?

I found a page that has a <div style="display:table">. On Chrome, when I tab to an <input> contained in that <div>, NVDA announces "table" before it announces the input field. JAWS does not say "table".

If I view the accessibility properties in Chrome, it says the role is LayoutTable. A LayoutTable is not a real role with regards to ARIA roles.

Even though NVDA says "table", you can't use any table navigation keys.

I find this quite confusing. Should Chrome not be surfacing that this is a layout table? role="table" isn't specified anywhere. But whether a layout table is correct or not, JAWS seems to ignore it but NVDA does not.

Firefox does not announce "table" so there's no confusion there.

I took a quick look at NVDA bugs in github but didn't see anything offhand, but then I didn't look very hard.

This simple example shows the problem. The two button elements are only there to give me tab stops before and after the input field.

<button>foo</button>
<div style="display:table">
<input>
</div>
<button>foo</button>

From: Jonathan Cohn
Date: Wed, Apr 21 2021 10:20AM
Subject: Re: Should NVDA announce "table" when itencountersCSS display:table ?
← Previous message | Next message →

Is there some confusion here going on between <table> HTML designs that are only used for layout and CSS tables?

The original posting specifically mentioned table in the style, not the HTML.
Apparently, NVDA recognizes the CSS table, but does not further process it.
Traditionally, layout tables are HTML elements s <table>, <tr>, <th?, <tbody> that have no <th? elements, or are quite small.

No wonder, screen reader users with no HTML understanding get confused, most don't care as long as it reads sensibly.
Jonathan

From: glen walker
Date: Wed, Apr 21 2021 1:01PM
Subject: Re: Should NVDA announce "table" when it encounters CSS display:table ?
← Previous message | Next message →

Thanks, Jonathan. I was about to mention that. This isn't a page with
"traditional" layout tables that use <table> elements for pure layout
purposes. This is a page that is using CSS display:table. There are no
table semantics in the html and there are no ARIA roles specified on the
page. I was surprised NVDA+Chrome announced it as a table.

I know the opposite is typically surfaced. If I have a real <table>
element and I apply display:block or display:inline or almost anything that
changes it from the default display:table that the screen reader no longer
thinks the table is a table anymore.


On Wed, Apr 21, 2021 at 10:20 AM Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:

> Is there some confusion here going on between <table> HTML designs that
> are only used for layout and CSS tables?
>
> The original posting specifically mentioned table in the style, not the
> HTML.
> Apparently, NVDA recognizes the CSS table, but does not further process
> it.
> Traditionally, layout tables are HTML elements s <table>, <tr>, <th?,
> <tbody> that have no <th? elements, or are quite small.
>
> No wonder, screen reader users with no HTML understanding get confused,
> most don't care as long as it reads sensibly.
> Jonathan
>
> > > > >

From: Farough, David (CFP/PSC)
Date: Wed, Apr 28 2021 9:16AM
Subject: Re: Should NVDA announce "table" when it encounters CSS display:table ?
← Previous message | No next message

We currently have an application which uses display table.
We have recently noticed that this can modify the groupings of radio buttons. Jaws and NVDA will, when focussing on a radio button, speak the control but report it's position
as being "1 of 1" instead of it's Propper position within the group.

This behaviour occurs in Firefox 89 and Microsoft Edge
This does not occur in Firefox though.
We are hoping that using the presentation role on the div will correct this.

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Wednesday, April 21, 2021 3:01 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Should NVDA announce "table" when it encounters CSS display:table ?

Thanks, Jonathan. I was about to mention that. This isn't a page with "traditional" layout tables that use <table> elements for pure layout purposes. This is a page that is using CSS display:table. There are no table semantics in the html and there are no ARIA roles specified on the page. I was surprised NVDA+Chrome announced it as a table.

I know the opposite is typically surfaced. If I have a real <table> element and I apply display:block or display:inline or almost anything that changes it from the default display:table that the screen reader no longer thinks the table is a table anymore.


On Wed, Apr 21, 2021 at 10:20 AM Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:

> Is there some confusion here going on between <table> HTML designs
> that are only used for layout and CSS tables?
>
> The original posting specifically mentioned table in the style, not
> the HTML.
> Apparently, NVDA recognizes the CSS table, but does not further
> process it.
> Traditionally, layout tables are HTML elements s <table>, <tr>, <th?,
> <tbody> that have no <th? elements, or are quite small.
>
> No wonder, screen reader users with no HTML understanding get
> confused, most don't care as long as it reads sensibly.
> Jonathan
>
> > > archives at http://webaim.org/discussion/archives
> >