I have multiple <tbody> sections in my <table> and it's reading each <th> tag the table contains. They have unique id and header attributes assigned to the various th and td tags so, to me, it doesn't make sense why the NVDA screen reader is outputting the following output:
[row# tbody 1, column header 1 name]
[<th> tbody 2, column header 1 name]
[<th> tbody 3, column header 1 name]
Current tbody 4, column header 1 name
[output of column1 data]
[output of column2 data]
[output of column3 data]
[output of column4 data]
The HTML is structured like this, here is the Pen also showing this issue
caption{
text-align:left;
display: table-caption;
clip: rect(1px, 1px, 1px, 1px);
height:1px;
overflow:hidden;
position: absolute;
top: auto;
width: 1px;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
.hierarchy1{
font-size:1.25em;
font-weight:bold;
}
.hierarchy2{
backgound-color:#ededed;
padding: 9px 10px 7px 8px;
border-top: 1px solid #ccc;
font-weight: bold;
}
.hierarchy3{
}
tr{
height:45px;
display:table-row;
}
table
{
width: 100%;
border-collapse: collapse;
}<table>
<caption class="offScreen">Balance Sheet Table</caption>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col" id="date-cell-0-1">Assets (Millions)</th>
<th class="right greyBL" scope="col" id="date-cell-1-1">9/30/2012</th>
<th class="right greyBL" scope="col" id="date-cell-2-1">9/30/2013</th>
<th class="right greyBL" scope="col" id="date-cell-3-1">9/30/2014</th>
<th class="right greyBL" scope="col" id="date-cell-4-1">9/30/2015</th>
</tr>
<tr class="hierarchy5">
<td class="left" headers="date-cell-0-1">Cash</td>
<td class="right" headers="date-cell-1-1">--</td>
<td class="right" headers="date-cell-2-1">--</td>
<td class="right" headers="date-cell-3-1">10,232.00</td>
<td class="right" headers="date-cell-4-1">--</td>
</tr>
<tr class="hierarchy4">
<td class="left" headers="date-cell-0-1">Cash Equivalents</td>
<td class="right" headers="date-cell-1-1">10,746.00</td>
<td class="right" headers="date-cell-2-1">14,259.00</td>
<td class="right" headers="date-cell-3-1">13,844.00</td>
<td class="right" headers="date-cell-4-1">21,120.00</td>
</tr>
</tbody>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col" id="date-cell-0-2">Liability And Shareholder Equity (Millions)</th>
<th class="right greyBL" scope="col" id="date-cell-1-2">9/30/2012</th>
<th class="right greyBL" scope="col" id="date-cell-2-2">9/30/2013</th>
<th class="right greyBL" scope="col" id="date-cell-3-2">9/30/2014</th>
<th class="right greyBL" scope="col" id="date-cell-4-2">9/30/2015</th>
</tr>
<tr class="hierarchy5">
<td class="left" headers="date-cell-0-2">Accounts Payable</td>
<td class="right" headers="date-cell-1-2">21,175.00</td>
<td class="right" headers="date-cell-2-2">22,367.00</td>
<td class="right" headers="date-cell-3-2">30,196.00</td>
<td class="right" headers="date-cell-4-2">35,490.00</td>
</tr>
<tr class="hierarchy4">
<td class="left" headers="date-cell-0-2">Income Tax Payable</td>
<td class="right" headers="date-cell-1-2">--</td>
<td class="right" headers="date-cell-2-2">--</td>
<td class="right" headers="date-cell-3-2">--</td>
<td class="right" headers="date-cell-4-2">--</td>
</tr>
</tbody>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col" id="date-cell-0-3">Supplemental (Millions)</th>
<th class="right greyBL" scope="col" id="date-cell-1-3">9/30/2012</th>
<th class="right greyBL" scope="col" id="date-cell-2-3">9/30/2013</th>
<th class="right greyBL" scope="col" id="date-cell-3-3">9/30/2014</th>
<th class="right greyBL" scope="col" id="date-cell-4-3">9/30/2015</th>
</tr>
<tr class="hierarchy1">
<td class="right" headers="date-cell-0-3">Total Capitalization</td>
<td class="right" headers="date-cell-1-3">111,210.00</td>
<td class="right" headers="date-cell-2-3">140,509.00</td>
<td class="right" headers="date-cell-3-3">140,534.00</td>
<td class="right" headers="date-cell-4-3">172,818.00</td>
</tr>
<tr class="hierarchy1">
<td class="left" headers="date-cell-0-3">Capital Lease Obligations</td>
<td class="right" headers="date-cell-1-3">--</td>
<td class="right" headers="date-cell-2-3">--</td>
<td class="right" headers="date-cell-3-3">--</td>
<td class="right" headers="date-cell-4-3">--</td>
</tr>
<tr class="hierarchy1">
<td class="left" headers="date-cell-0-3">Preferred Stock Equity</td>
<td class="right" headers="date-cell-1-3">--</td>
<td class="right" headers="date-cell-2-3">--</td>
<td class="right" headers="date-cell-3-3">--</td>
<td class="right" headers="date-cell-4-3">--</td>
</tr>
</tbody>If you have any insight to this HTML structure and accessibility, it would be much appreciated.