桌子和屏幕阅读器 [英] Tables and Screen Readers

问题描述

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

I seem to be having troubles getting a screen reader to read simple tables. I have the HTML below:

<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行。

When the screen reader hits this table it says "Table. 0 Columns. 0 Rows."

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

I have tried many examples online and tried to use that WCAG2.0 standards as a guide line, but it doesnt seem to work.

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

I have also tried different table layouts and structures and still get the same result.

推荐答案

我还没有通过屏幕阅读器来运行它，但是它可能会被您的& nbsp 抛弃。 & nbsp 需要用分号关闭。像这样：& nbsp; 。此外，表没有alt属性。而是使用摘要属性提供对屏幕阅读器有用的解释。

I haven't run this through a screen reader, but it could be thrown off by your &nbsp. &nbsp needs to be closed with a semi-colon. Like this:  . Also, there is no alt attribute for table. Provide an explanation, useful for screen readers, with the summary attribute instead.

最重要的是，我建议您删除该空单元格并使用CSS腾出更大的空间。

On top of that, I would advise that you remove that empty cell and make a bigger space with CSS.

1-删除空白行，并与CSS保持空白，如下所示：

1 - Remove the blank row and provide a gap with CSS, like this:

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-...另外，也许有点挑剔，所以您可以尝试：

2 - ...and on top of that, maybe it's a bit picky, so you could try:

<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-...但理想情况下，表格如下所示：

3 - ...but ideally the table would be just like this:

<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;  }

这篇关于桌子和屏幕阅读器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！