Table 屏幕阅读器的样式化输入
Table Styled Input for Screen Readers
看看这个image。
我有一个 table 包含输入。每个输入由列 header 单元格和行 header 单元格定义。您如何确保盲人用户知道在每个输入字段中输入什么?
让我们使用以下简化的 html table 作为示例:
<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>
W3在例3中描述了答案:
https://www.w3.org/WAI/tutorials/forms/grouping/
基本上你需要使用隐藏的字段集、图例和标签。该示例使用 class 隐藏标签,但我建议您改为考虑 aria-label 标签,该标签仅由屏幕阅读器(和其他辅助技术)读取但在视觉上是隐藏的。
看看这个image。 我有一个 table 包含输入。每个输入由列 header 单元格和行 header 单元格定义。您如何确保盲人用户知道在每个输入字段中输入什么?
让我们使用以下简化的 html table 作为示例:
<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>
W3在例3中描述了答案: https://www.w3.org/WAI/tutorials/forms/grouping/
基本上你需要使用隐藏的字段集、图例和标签。该示例使用 class 隐藏标签,但我建议您改为考虑 aria-label 标签,该标签仅由屏幕阅读器(和其他辅助技术)读取但在视觉上是隐藏的。