html - 屏幕阅读器的表格样式输入

Question

看看这张图片。我有一个包含输入的表。每个输入由一个列标题单元格和一个行标题单元格定义。您如何确保盲人用户知道在每个输入字段中输入什么内容？

让我们使用以下简化的 html 表作为示例：

<table border="1">
  <tr>
    <th></th>
    <th>Income</th>
    <th>Change</th>
  </tr>
  <tr>
    <th>Personal income</th>
    <td><input type="number" value="0"></td>
    <td><input type="number" value="0"></td>
  </tr>
  <tr>
    <th>Company earnings</th>
    <td><input type="number" value="0"></td>
    <td><input type="number" value="0"></td>
  </tr>
</table>

https://jsfiddle.net/vzr6rmzx/

Answer 1

W3 在示例 3 中描述了答案： https ://www.w3.org/WAI/tutorials/forms/grouping/

基本上你需要使用隐藏的字段集、图例和标签。该示例使用隐藏标签的类，但我建议您改为考虑仅由屏幕阅读器（和其他辅助技术）读取但在视觉上隐藏的 aria-label 标签。