248273 2022-11-23 06:26:36 -0800 AX: In responsive website table linearized with CSS on mobile (display:block on descendant elements) doesn't work with Safari + VO 2022-11-23 07:37:56 -0800 1 1 1 Unclassified WebKit Accessibility Safari 16 All All NEW InRadar P2 Blocker --- 1 giacomo.petri webkit-unassigned andresg_22 marco.sabidussi webkit-bug-importer oldest_to_newest 1914306 0 463691 giacomo.petri 2022-11-23 06:26:36 -0800 Created attachment 463691 table code example This topic is conceptually similar to the one discussed for list elements (https://bugs.webkit.org/show_bug.cgi?id=170179#c1), but different in terms of experience and results. I found myself in front of a website that is using a simple data table to present information; this website is responsive and, while navigating the content on desktop, the semantic html table is also visually displayed as a table; while instead navigating the content on mobile the table is linearized and thanks to its simple content, table headers are removed from the acc tree (display:none), resulting in a layout table. Attached a simpler/demo example of the table, code snippet below: HTML <table> <caption class="outscreen">Your Cart</caption> <thead> <tr> <th scope="col">Item</th> <th scope="col">Quantity</th> <th scope="col">Price (per item)</th> <th scope="col">Total Price</th> </tr> </thead> <tbody> <tr> <td> <img src="img-test.png" alt=""> <div class="hclass4">Item name</div> </td> <td>2</td> <td>100$</td> <td>200$</td> </tr> </tbody> </table> CSS table, tbody, th, tr, td { border:1px solid; border-collapse: collapse; } @media only screen and (max-width: 800px) { table, tbody, th, tr, td { border:0; } tr, td {display:block;} th {display: none;} tr>td:nth-child(3) { display:none; } } Now, with Safari + VO on desktop, everything is working as expected, but testing with an iPhone (Safari + VO again) the table is announced as empty. First of all, a table without table headers should be a layout table and not a data table (but this might be partially relevant here). But, even more important is that a layout choice is affecting negatively VoiceOver users, which are prevented to access the content on iPhone. Even though the issue can be solved simply by forcing also the <table> and <tbody> to look like block elements with "display: block", this is not intuitive. I don't know how many occurrences of this scenario are present on webpages, but right now this is a blocker for the specific website, even if the semantic structure of the table is correct. We know that accessibility is unfortunately an unfamiliar topic for many and this scenario makes things even more complicated, especially for people that try to improve the accessibility experience but don't have a deep experience with the topic. 1914307 1 webkit-bug-importer 2022-11-23 06:26:49 -0800 <rdar://problem/102627057> 463691 2022-11-23 06:26:36 -0800 2022-11-23 06:26:36 -0800 table code example table-display-block-example-issue.html text/html 1082 giacomo.petri PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KCTxoZWFkPgoJCTx0aXRsZT5UYWJsZSBl cnJvcjwvdGl0bGU+CgkJPHN0eWxlPgogICAgICB0YWJsZSwgdGJvZHksIHRoLCB0ciwgdGQgewog ICAgICAgIGJvcmRlcjoxcHggc29saWQ7CiAgICAgICAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBz ZTsKICAgICAgfQoKCQkJQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA4MDBweCkg ewogICAgICAgIHRhYmxlLCB0Ym9keSwgdGgsIHRyLCB0ZCB7CiAgICAgICAgICBib3JkZXI6MDsK ICAgICAgICB9CiAgICAgICAgdHIsIHRkIHtkaXNwbGF5OmJsb2NrO30KICAgICAgICB0aCB7ZGlz cGxheTogbm9uZTt9CiAgICAgICAgdHI+dGQ6bnRoLWNoaWxkKDMpIHsKICAgICAgICAgIGRpc3Bs YXk6bm9uZTsKICAgICAgICB9CiAgICAgIH0KICAgIDwvc3R5bGU+Cgk8L2hlYWQ+Cgk8Ym9keT4K CQk8bWFpbj4gICAgICAKICAgICA8dGFibGU+CiAgICAgICA8Y2FwdGlvbj5Zb3VyIENhcnQ8L2Nh cHRpb24+CiAgICAgICAgPHRoZWFkPgogICAgICAgICAgPHRyPgogICAgICAgICAgICA8dGggc2Nv cGU9ImNvbCI+SXRlbTwvdGg+CiAgICAgICAgICAgIDx0aCBzY29wZT0iY29sIj5RdWFudGl0eTwv dGg+CiAgICAgICAgICAgIDx0aCBzY29wZT0iY29sIj5QcmljZSAocGVyIGl0ZW0pPC90aD4KICAg ICAgICAgICAgPHRoIHNjb3BlPSJjb2wiPlRvdGFsIFByaWNlPC90aD4KICAgICAgICAgIDwvdHI+ CiAgICAgICAgPC90aGVhZD4KICAgICAgICA8dGJvZHk+CiAgICAgICAgICA8dHI+CiAgICAgICAg ICAgIDx0ZD4KICAgICAgICAgICAgCTxpbWcgc3JjPSJpbWctdGVzdC5wbmciIGFsdD0iIj4KICAg ICAgICAgICAgICA8ZGl2IGNsYXNzPSJoY2xhc3M0Ij5Qcm9kdWN0IG5hbWU8L2Rpdj4KICAgICAg ICAgICAgPC90ZD4KICAgICAgICAgICAgPHRkPjIgaXRlbXM8L3RkPgogICAgICAgICAgICA8dGQ+ MTAwJDwvdGQ+CiAgICAgICAgICAgIDx0ZD4yMDAkPC90ZD4KICAgICAgICAgIDwvdHI+CiAgICAg ICAgPC90Ym9keT4KICAgICAgPC90YWJsZT4KICAgIDwvbWFpbj4gCgk8L2JvZHk+CjwvaHRtbD4=