如何为无障碍用户设计完美的表格-JavaScript中文网-JavaScript教程资源分享门户

当设计网站、软件应用或移动应用时，我们通常会使用表格来呈现数据和内容。但是，对于视觉障碍用户和其他需要较高可访问性的用户，这些表格可能会导致无法理解和使用。因此，为无障碍用户设计完美的表格是很重要的。以下是一些实践方法，可以帮助您创建功能强大、可访问性强的表格。

添加表格标题和说明

每一个表格都应该有一个独立的标题和说明。这将使用户能够轻松地理解表格的内容和目的。为表格添加标题，可以使用 HTML 标签 caption。同时，您可以使用 summary 属性向用户提供更多关于表格内容的信息，这对于视力受损的用户特别有帮助。

// www.javascriptcn.com code example
<table summary="这是一张无障碍表格">
  <caption>无障碍表格</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>22</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>女</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

使用语义化标签

在 HTML5 中，我们可以使用语义化标签来替代无意义的 div 和 span 标签。这对于屏幕阅读器很有帮助，能够更好地解释表格的结构和内容。

// www.javascriptcn.com code example
<table aria-describedby="table-desc">
  <caption>无障碍表格</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">性别</th>
      <th scope="col">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">小明</th>
      <td>男</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">小红</th>
      <td>女</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

<p id="table-desc">
  本表格显示了两个人的个人信息。
</p>

使用 `scope` 属性

使用 scope 属性可以帮助我们更好地定义表格头。scope 属性可以设置为 col 或 row。当设置为 col 时，表示与该单元格关联的表头单元格在同一列；当设置为 row 时，则表示关联的表头单元格在同一行。

// www.javascriptcn.com code example
<table>
  <caption>无障碍表格</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">性别</th>
      <th scope="col">年龄</th>
      <th scope="col">地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">小明</th>
      <td>男</td>
      <td>22</td>
      <td>上海市</td>
    </tr>
    <tr>
      <th scope="row">小红</th>
      <td>女</td>
      <td>18</td>
      <td>北京市</td>
    </tr>
  </tbody>
</table>

添加标题和概述信息

使用标题和概述信息，可以帮助屏幕阅读器更好地解释表格的结构和内容。标题和概述信息可以使用 summary 和 aria-describedby 属性进行添加。

// www.javascriptcn.com code example
<table aria-describedby="table-desc">
  <caption>无障碍表格</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">性别</th>
      <th scope="col">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">小明</th>
      <td>男</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">小红</th>
      <td>女</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

<p id="table-desc">
  本表格显示了两个人的个人信息。
</p>

使用固定表头

当表格中有大量内容时，页面滚动会导致表头区域离开屏幕，这会带来使用障碍。为了使用户浏览表格更容易，可以将表头行和列固定在页面的顶部或左侧。

// www.javascriptcn.com code example
<table>
  <thead>
    <tr>
      <th class="fix-left">姓名</th>
      <th class="fix-left">性别</th>
      <th class="fix-left">年龄</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="fix-left">小明</th>
      <td class="fix-left">男</td>
      <td class="fix-left">22</td>
      <td>上海市</td>
    </tr>
    <tr>
      <th class="fix-left">小红</th>
      <td class="fix-left">女</td>
      <td class="fix-left">18</td>
      <td>北京市</td>
    </tr>
    ...
  </tbody>
</table>

// www.javascriptcn.com code example
/* 固定表头 */
th.fix-left {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white;
}

th.fix-top {
  position: sticky;
  top: 0;
}

添加文本替代内容

如果表格包含图像或其他媒体，建议为它们添加文本替代内容，这将为视觉受损的用户提供表格内容的介绍，同时可以提高搜索引擎的可访问性。

// www.javascriptcn.com code example
<table>
  <caption>无障碍表格</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">性别</th>
      <th scope="col">头像</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">小明</th>
      <td>男</td>
      <td><img src="avatar-ming.jpg" alt="小明头像"></td>
    </tr>
    <tr>
      <th scope="row">小红</th>
      <td>女</td>
      <td><img src="avatar-hong.jpg" alt="小红头像"></td>
    </tr>
  </tbody>
</table>

结尾

通过以上实践方法，可以大大提高表格的可访问性，使更多的用户能够更好地了解您的内容和数据。在设计表格时，请牢记以上要点，尽量为每个用户提供无障碍的使用体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d626a2a941bf7134bcf101

如何为无障碍用户设计完美的表格