Bug 248273 – AX: In responsive website table linearized with CSS on mobile (display:block on descendant elements) doesn't work with Safari + VO

• Component: Accessibility
• Status: NEW

[Giacomo Petri]

Created attachment 463691 [details]
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.

[Radar WebKit Bug Importer]

<rdar://problem/102627057>