表和屏幕阅读器

Question

我似乎有麻烦让屏幕阅读器阅读简单的表格.我有以下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标准作为指导,但它似乎没有用.

我也尝试过不同的表格布局和结构,但仍然得到相同的结果.

Answer 1

我没有通过屏幕阅读器运行它,但它可能会被你的&nbsp.&nbsp需要用分号结束.像这样: .此外,表没有alt属性.使用summary属性提供对屏幕阅读器有用的解释.

最重要的是,我建议你删除那个空单元格并用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;  }