我似乎无法让屏幕阅读器阅读简单的表格。我有以下 HTML:
<table alt="Account Information">
<tr>
<th scope='row'>Account Number:</th>
<td>1111 1111 1111</td>
<td>  <td/>
<th scope='row'>Reference Number:</th>
<td>XXXX XXXX XXXX</td>
</tr>
</table>
当屏幕阅读器点击此表时,它会显示
“表。0 列。0 行。”
我在网上尝试了很多例子,并尝试使用 WCAG 2.0 标准作为指导,但它似乎不起作用。
我还尝试了不同的表格布局和结构,但仍然得到相同的结果。
我还没有通过屏幕阅读器运行它,但它可能会被你的 
.  
需要用分号结束。像这样:
。此外,表没有 alt 属性。提供对屏幕阅读器有用的解释,其中摘要属性反而。
最重要的是,我建议你删除那个空单元格并使用 CSS 创建一个更大的空间。
1 - 删除空白行并使用 CSS 提供间隙,如下所示:
HTML
<table summary="Account Information">
<tr>
<th scope="row">Account Number:</th>
<td>1111 1111 1111</td>
<th scope="row">Reference Number:</th>
<td>XXXX XXXX XXXX</td>
</tr>
</table>
CSS
th { padding: 0 10px; }
2 - ...最重要的是,也许它有点挑剔,所以你可以尝试:
<table summary="Account Information">
<thead>
<tr>
<th scope="col">Account Number Heading</th>
<th scope="col">Account Number</th>
<th scope="col">Reference Number Heading</th>
<th scope="col">Reference Number</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Account Number:</th>
<td>1111 1111 1111</td>
<th scope="row">Reference Number:</th>
<td>XXXX XXXX XXXX</td>
</tr>
</tbody>
</table>
CSS
thead { display: none; }
th { padding: 0 10px; }
3 - ...但理想情况下,表格应该是这样的:
<table summary="Account Information">
<thead>
<tr>
<th scope="col">Account Number</th>
<th scope="col">Reference Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>1111 1111 1111</td>
<td>XXXX XXXX XXXX</td>
</tr>
</tbody>
</table>
CSS
th { padding: 0 10px; }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)