logo标签列表

在表格中使用多个<tbody>标签的可访问性

htmlaccessibilitynvda
3

我在我的 <table> 中有多个 <tbody> 部分，它正在读取表格包含的每个 <th> 标签。它们都有唯一的 id 和 header 属性分配给各种 th 和 td 标签，所以对我来说，NVDA 屏幕阅读器输出以下输出没有意义：

[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]

HTML的结构如下所示，这里是展示此问题的代码示例。 

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>

如果您对此HTML结构和可访问性有任何见解，将不胜感激。
是的，那个问题中有一个打字错误。它与问题无关。 - Ben Petersen
你有现成的例子吗？听起来NVDA正在按照预期执行，但如果您的单元格真的包含我上面看到的内容，可能会很混乱。我在这个CodePen中有一个表格，您可以尝试看看它是否按照您的预期阅读（请注意，没有<tbody>，因为这是为客户演示而准备的）。此外，请注意，此处的“id”属性对NVDA无效。 - aardrian
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - BSMP
1
我可能因为您的示例文本感到困惑（我制作了一个CodePen并粘贴进去进行测试）。您有实时示例吗？另外，我的评论表述不够清晰。也许不要依赖于“headers”属性。此外，请查看这个屏幕阅读器/浏览器支持矩阵，看看您所处的位置。 - aardrian
1
我在CodePen上制作了这个：http://s.codepen.io/aardrian/debug/zBOYmN 你也没有说你在使用NVDA时使用的浏览器/操作系统。请注意，NVDA最适合与Firefox一起使用。 - aardrian
显示剩余3条评论
1个回答
1

通过评论，我发现这个问题与Chrome w/ NVDA有关。Firefox w/ NVDA的工作正常。

为了在不同浏览器中使用NVDA，我建立了多个表格，每个表格都有一个th，我删除了标题和id属性，因为这样更符合语义。这是一个跨浏览器工作的示例(Chrome、Firefox)与NVDA

<table>
  <caption class="offScreen">Balance Sheet Table</caption>
  <tbody>
  <tr class="hierarchy0 bold">
    <th class="left" scope="col">Assets (Millions)</th>
    <th class="right greyBL" scope="col">9/30/2012</th>
    <th class="right greyBL" scope="col">9/30/2013</th>
    <th class="right greyBL" scope="col">9/30/2014</th>
    <th class="right greyBL" scope="col">9/30/2015</th>
  </tr>
  <tr class="hierarchy5">
    <td class="left">Cash</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">10,232.00</td>
    <td class="right">--</td>
  </tr>
  <tr class="hierarchy4">
    <td class="left">Cash Equivalents</td>
    <td class="right">10,746.00</td>
    <td class="right">14,259.00</td>
    <td class="right">13,844.00</td>
    <td class="right">21,120.00</td>
  </tr>
  </tbody>
</table>
<table>
 <tbody>
  <tr class="hierarchy0 bold">
    <th class="left" scope="col">Liability And Shareholder Equity (Millions)</th>
    <th class="right greyBL" scope="col">9/30/2012</th>
    <th class="right greyBL" scope="col">9/30/2013</th>
    <th class="right greyBL" scope="col">9/30/2014</th>
    <th class="right greyBL" scope="col">9/30/2015</th>
  </tr>
  <tr class="hierarchy5">
    <td class="left">Accounts Payable</td>
    <td class="right">21,175.00</td>
    <td class="right">22,367.00</td>
    <td class="right">30,196.00</td>
    <td class="right">35,490.00</td>
  </tr>
  <tr class="hierarchy4">
    <td class="left">Income Tax Payable</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
  </tr>
  </tbody>
 </table>
 <table>
  <tbody>
  <tr class="hierarchy0 bold">
    <th class="left" scope="col">Supplemental (Millions)</th>
    <th class="right greyBL" scope="col">9/30/2012</th>
    <th class="right greyBL" scope="col">9/30/2013</th>
    <th class="right greyBL" scope="col">9/30/2014</th>
    <th class="right greyBL" scope="col">9/30/2015</th>
  </tr>
  <tr class="hierarchy1">
    <td class="right">Total Capitalization</td>
    <td class="right">111,210.00</td>
    <td class="right">140,509.00</td>
    <td class="right">140,534.00</td>
    <td class="right">172,818.00</td>
  </tr>
  <tr class="hierarchy1">
    <td class="left">Capital Lease Obligations</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
  </tr>
  <tr class="hierarchy1">
    <td class="left">Preferred Stock Equity</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
    <td class="right">--</td>
  </tr>
  </tbody>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接