[Webkit-unassigned] [Bug 248273] New: AX: In responsive website table linearized with CSS on mobile (display:block on descendant elements) doesn't work with Safari + VO

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=248273

            Bug ID: 248273
           Summary: AX: In responsive website table linearized with CSS on
                    mobile (display:block on descendant elements) doesn't
                    work with Safari + VO
           Product: WebKit
           Version: Safari 16
          Hardware: All
                OS: All
            Status: NEW
          Severity: Blocker
          Priority: P2
         Component: Accessibility
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: giacomo.petri at usablenet.com
                CC: andresg_22 at apple.com,
                    webkit-bug-importer at group.apple.com

Created attachment 463691

  --> https://bugs.webkit.org/attachment.cgi?id=463691&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20221123/c4183e44/attachment-0001.htm>