3

我似乎很难让屏幕阅读器阅读简单的表格。我有下面的HTML：

<table alt="Account Information">
       <tr>
          <th scope='row'>Account Number:</th>
          <td>1111 1111 1111</td>
          <td>&nbsp&nbsp<td/>
          <th scope='row'>Reference Number:</th>
          <td>XXXX XXXX XXXX</td>
       </tr>
</table>

当屏幕阅读器点击此表时，它会显示“表。0 列。0 行”。

我在网上尝试了很多示例，并尝试使用 WCAG2.0 标准作为指导方针，但它似乎不起作用。

我也尝试了不同的表格布局和结构，但仍然得到相同的结果。

4

1 回答 1

6

我没有通过屏幕阅读器运行它，但它可能会被你的&nbsp. &nbsp需要用分号关闭。像这样：&nbsp;。此外，表没有 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;  }
于 2014-02-18T05:58:34.687 回答