<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - AX: Headers of table not read by VoiceOver"
   href="https://bugs.webkit.org/show_bug.cgi?id=158693">158693</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>AX: Headers of table not read by VoiceOver
          </td>
        </tr>

        <tr>
          <th>Classification</th>
          <td>Unclassified
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 9
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>All
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>OS X 10.9
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Critical
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>Accessibility
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned&#64;lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>helene.vinh&#64;amadeus.com
          </td>
        </tr>

        <tr>
          <th>CC</th>
          <td>webkit-bug-importer&#64;group.apple.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Created <span class=""><a href="attachment.cgi?id=281175" name="attach_281175" title="Table extracted from test page">attachment 281175</a> <a href="attachment.cgi?id=281175&amp;action=edit" title="Table extracted from test page">[details]</a></span>
Table extracted from test page

Hello,

I am working for Amadeus, a company that provides IT solutions for the travel industry.
We are developing a flight booking website that should be accessible to screen reader users.

We are currently encountering a specific issue with VoiceOver about the headers of a table that are not read.
FYI it is working fine with other screen readers such as JAWS and NVDA.

Please launch the URL below to reproduce the issue.
There is table with prices in the page.
When using the table shortcuts, the headers of the table are not read.

After extracting the table without CSS and icons (cf attached file), the table is read correctly with the headings.

When testing in the page, we noticed that font icons are read even if hidden with aria-hidden attribute (VoiceOver announces them as “group …”).
This is not happening while testing in the extracted table as there is no CSS.
Could this be the cause of the issue for the table headings?
Also, how can we hide meaningless icons for VoiceOver users when aria-hidden is not taken into account? Will it be fixed in a next version?

Testing environment
We are testing on MAC OS 10.9.5 with Safari browser and VoiceOver.

Best regards

URL for test page

<a href="https://pcm.uat01.amadeus.com/plnext/demo/Override.action?SO_SITE_RUI_AX_CAL_ENABLED=TRUE&amp;TRIP_FLOW=YES&amp;BOOKING_FLOW=REVENUE&amp;B_LOCATION_1=KEF&amp;B_LOCATION_2=LON&amp;B_DATE_1=201608110000&amp;B_ANY_TIME_1=TRUE&amp;E_LOCATION_1=LON&amp;E_LOCATION_2=KEF&amp;B_DATE_2=201608220000&amp;B_ANY_TIME_2=TRUE&amp;TRIP_TYPE=R&amp;EXTERNAL_ID=BOOKING&amp;PRICING_TYPE=O&amp;EMBEDDED_TRANSACTION=FlexPricerAvailability&amp;DISPLAY_TYPE=1&amp;ARRANGE_BY=D&amp;SO_SITE_MATRIX_CALENDAR=TRUE&amp;REFRESH=0&amp;COMMERCIAL_FARE_FAMILY_1=OWCOACHEU&amp;COMMERCIAL_FARE_FAMILY_2=OWCOMFVIA&amp;COMMERCIAL_FARE_FAMILY_3=OWCOMFVIA&amp;DATE_RANGE_VALUE_1=3&amp;DATE_RANGE_VALUE_2=3&amp;DATE_RANGE_QUALIFIER_1=C&amp;DATE_RANGE_QUALIFIER_2=C&amp;TRAVELLER_TYPE_1=ADT&amp;TRAVELLER_TYPE_2=&amp;TRAVELLER_TYPE_3=&amp;TRAVELLER_TYPE_4=&amp;TRAVELLER_TYPE_5=&amp;TRAVELLER_TYPE_6=&amp;TRAVELLER_TYPE_7=&amp;TRAVELLER_TYPE_8=&amp;TRAVELLER_TYPE_9=&amp;HAS_INFANT_1=FALSE&amp;HAS_INFANT_2=FALSE&amp;HAS_INFANT
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>