html-tableaccessibilityvoiceover

Vertical table headers read wrong in Voice Over on iOS and Mac


I have a table with vertical headers and I'm using Voice Over, when navigating it is not doing the correct association between the th and cells. Some the examples I have found are using the scope="row" on the th, others don't, but when testing them it does not work either way. Here's a link to one from the w3 https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only

When I go through the cells horizontally with control + option right arrow, every time I move into a new cell it reads a different th for it. As you move to the right on a row, the screen reader will read the next th along with it.

Example of issue: When I move to the 3rd cell (24 march) screen reader says: Venue the 24th of march.
Expected result: It should say: Date the 24th of march.

My expectation is that for every cell in the same row, it should map them to the same initial th from that row and read them together.

Here's the html:

<table>
  <tr>
    <th scope="row">Date</th>
    <td>12 February</td>
    <td>24 March</td>
    <td>14 April</td>
  </tr>
  <tr>
    <th scope="row">Event</th>
    <td>Waltz with Strauss</td>
    <td>The Obelisks</td>
    <td>The What</td>
  </tr>
  <tr>
    <th scope="row">Venue</th>
    <td>Main Hall</td>
    <td>West Wing</td>
    <td>Main Hall</td>
  </tr>
</table>  

Visual example of the table


Solution

  • My expectation is that for every cell in the same row, it should map them to the same initial th from that row and read them together.

    Column or row headers are only read when you switch contexts. So if you're on a row and navigate horizontally, from "Waltz" to "Obelisk", you won't hear the row header again because you already know you're on that row.

    But if you move to a new row, from "Obelisk" down to "West Wing", you should hear "Venue", which is the new context for the new row and then you'll hear "West Wing".

    Your example didn't have column headers but it works similarly. If you navigate vertically down a column, you will not hear the column header repeated every time for each cell. But if you move left or right to a new column, then you'll hear the new column header and then the table cell.