Accessible data tables using Talkback
I'm sorta at my wits end about a simple data table and having Talkback being able to associate the row and column headers to the data cells. It works perfectly when read it as a responsive mobile web page but fails when converted to an android app. I have sent messages to Eye-Free, Google Forum, to see if Talkback and\or Lollipop is the issue. I was wondering if anyone has had this problem and what was your work around. I have tried plain <th>, <th scope="", headers\id and aria role (columnheader, rowheader, datacell, grid) with no luck.
I was looking at class="ui-table-cell-label" but wasn't sure how this work. Does this work similar to hidden accessible where the visual user doesn't see it but the screen reader does read it?
Here is the code I am using now:
- <div id="home" data-role="page" data-title="Home">
<div data-role="content">
<div date-role="header">
<h1>Data Table 1</h1>
</div>
<div role="main" class="ui-content">
<table data-role="table" id="my-table">
<thead>
<tr>
<th scope="row">Service Branch</th>
<th title-"Percentage of women">Percentage of Women</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Army</th>
<td>13.4%</td>
</tr>
<tr>
<th scope="row">Navy</th>
<td>15.9%</td>
</tr>
<tr>
<th scope="row">Marine Corps</th>
<td>6.6%</td>
</tr>
<tr>
<th scope="row">Air Force</th>
<td>19.2%</td>
</tr>
<tr>
<th scope="row">Coast Guard</th>
<td>13.4%</td>
</tr>
<tr>
<th scope="row">National Guard & Reserves</th>
<td>17.9%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>