IOS voiceover is pronouncing "zero" instead of pronouncing column header

Question

I have created a table component using React. We have an ios app in which that table is loaded. The table looks like below

Task	AssignedTo	DueDate
task name	Dev	6th April

Now when I open the app in iphone and enable voiceover then it is read like this

Heading, Text Field, 0, Column Header, Column 1

Notice, in the pronunciation instead of pronouncing column header name, it is announced as zero. Expected behavior is it is pronounced like this:

Heading, Text Field, Task, Column Header, Column 1

I want to understand, how voiceover extract text from table and why it is reading 0 instead of column header name.

I am new to stackoverflow, so sorry for the structural errors.

Update: Here is a snippet of code.

<th role="columnheader" data-columnid="initialColumn-1" aria-sort="none">
  <div>
    <div>
      <div hosting-element="hosting-element">
        <div>
          <div contenteditable="false">
            <div contenteditable="false" aria-readonly="true" spellcheck="false" autocapitalize="sentences" autocorrect="off" autocomplete="off" tabindex="0" data-gramm_editor="false" role="textbox">
              <div data-dbg-pageindex="0">
                <div>
                  <div>
                    <span>Task
                    </span>
                  </div>
                </div>
                <div contenteditable="false" aria-hidden="true">
                </div>
              </div>
            </div>
            <div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div tabindex="-1" aria-hidden="true">
    </div>
  </div>
</th>

Answer 1

You mention React and also tagged your question with html-table so I'm guessing this is an HTML application, not a native iOS app?

What does your table code look like? I'm a little puzzled why "heading" and "text field" are announced.

If you have an <h2> or any other level of heading in your table, you should hear the heading level. Voiceover will say "heading level X" after the heading text but in your example, you said you only heard "heading" without a level number.

And your table doesn't appear to have any <input> fields in it so why is "text field" announced?

I suppose if you have an <input> field whose label is "heading", then you'd hear "heading, text field".

<label for="foo">heading</label>
<input id="foo">

But, again, you didn't post any code so it's hard to say.

If your table is using proper structure, then if I tap on "Dev", I should hear "AssignedTo, Dev, row 2, column 2".

That is, I'll hear the column header text first, then the cell value, then the coordinates in the table (the row and the column number).

<table>
  <tr>
    <th scope="col">Task</th>
    <th scope="col">AssignedTo</th>
    <th scope="col">DueDate</th>
  </tr>
  <tr>
    <td>task name</td>
    <td>Dev</td>
    <td>6th April</td>
  </tr>
</table>

If I tap directly on a column header, for example "AssignedTo", I'll hear the column header text, the fact that it's a column header, and then the coordinates in the table. "AssignedTo, Column header, Row 1, Column 2".

If you tap on the first column header, in addition to what's announced above, you'll also hear "table start" and how many total rows and columns are in the table because you tapped in the first cell of the table.

Update based on new code snippet

Here's a short 20 second video of the new code running on iOS.

https://drive.google.com/file/d/1Gk_dm-P8DSUX5X3OCIl-bz-c_1GhGrYV/view?usp=sharing

The speech is a little fast (forgot to slow it down before recording) but you can see the caption panel at the bottom and follow along.

I was using w3chools.com as the testing page because it has an editor where I can paste code (kind of like using codepen). I put a few buttons before and after the table to give me something to focus on before I get to the table.

The full text of what's announced when I swipe right from the button to the first table column header is:

"Task, Row header, Column header, Row 1, Column 1, Text field, Read-only, Table start, 2 rows 3 columns, Double tap to edit, Use the rotor to access Misspelled Words"

There is not a "zero" in what's being announced.

As mentioned before, all you posted is just the text for the one column header and it's reading fine. You must have something else in your code causing the problem. Perhaps post a video showing the problem.

Answer 2

Try setting the header accessibilityLabel

header.accessibilityLabel = "Task"

Hope it helps!