无障碍 Web 设计中的表格管理技巧-JavaScript中文网-JavaScript教程资源分享门户

在进行 Web 设计时，我们经常需要使用表格来展示数据或布局页面。然而，对于视力障碍或其他障碍的用户来说，使用屏幕阅读器或其他辅助工具来访问这些表格可能会面临一些困难。因此，在设计和开发表格时，我们需要特别关注无障碍设计，以确保所有用户都能够轻松地阅读和使用表格。

表格结构的重要性

使用正确的表格结构是确保表格无障碍到达的关键。表格的结构应包括以下内容：<table>元素以及<thead>、<tbody>和<tfoot>元素。例如：

// javascriptcn.com 代码示例
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>学历</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>本科</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>35</td>
      <td>研究生</td>
    </tr>
  </tbody>
</table>

这里，<thead>用于包含表头，<tbody>用于包含表格主体，<tfoot>用于包含表格的脚注。<tr>元素用于定义表格行，<th>元素用于定义表头单元格，<td>元素用于定义数据单元格。

正确的表格结构有助于屏幕阅读器正确地读取表格，并且可以使用户更容易地理解表格的内部结构和内容。

提供标记和描述

我们还应该为表格提供正确的标记和描述，以帮助用户更好地理解表格的含义。可以使用<caption>元素向表格提供标题：

// javascriptcn.com 代码示例
<table>
  <caption>企业信息表</caption>
  <thead>
    <tr>
      <th>企业名称</th>
      <th>联系人</th>
      <th>电话号码</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ABC 公司</td>
      <td>张三</td>
      <td>12345678900</td>
    </tr>
    <tr>
      <td>DEF 公司</td>
      <td>李四</td>
      <td>98765432100</td>
    </tr>
  </tbody>
</table>

<caption>元素将放置在<table>元素之前，可在页面上显示表格的标题。

我们还可以使用aria-label或aria-describedby属性提供额外的描述信息。例如：

// javascriptcn.com 代码示例
<table aria-describedby="table-desc">
  <thead>
    <tr>
      <th>城市</th>
      <th>温度</th>
      <th>湿度</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>北京</td>
      <td>20℃</td>
      <td>60%</td>
    </tr>
    <tr>
      <td>上海</td>
      <td>25℃</td>
      <td>80%</td>
    </tr>
  </tbody>
</table>

<div id="table-desc" aria-hidden="true">这是一张显示了当前城市天气状况的表格</div>

在这个例子中，我们使用了一个隐藏的<div>元素，来为表格提供一个描述性的说明。

提供正确的焦点控制

对于键盘用户，我们需要确保他们能够正确地浏览和管理表格。因此，为表格提供正确的焦点控制非常重要。

可以通过在<table>元素上设置tabindex="0"属性来为表格提供焦点。这将使用户能够使用 Tab 和 Shift+Tab 键浏览表格。例如：

// javascriptcn.com 代码示例
<table tabindex="0">
  <thead>
    <tr>
      <th>序号</th>
      <th>任务名称</th>
      <th>完成日期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>编写技术文章</td>
      <td>2021-12-31</td>
    </tr>
    <tr>
      <td>2</td>
      <td>完善网站设计</td>
      <td>2022-01-10</td>
    </tr>
  </tbody>
</table>

为了使焦点控制更加易用，我们还可以使用 JavaScript 来提供一些交互性。例如，我们可以使用 arrow-up 和 arrow-down 键来浏览表格，使用 enter 键来选择单元格，使用 esc 键来关闭焦点：

// javascriptcn.com 代码示例
const table = document.querySelector('table');
const rows = table.querySelectorAll('tr');
let rowIndex = 0;
let cellIndex = 0;

document.addEventListener('keydown', function(evt) {
  switch (evt.key) {
    case 'ArrowUp':
      evt.preventDefault();
      rowIndex = Math.max(0, rowIndex - 1);
      break;
    case 'ArrowDown':
      evt.preventDefault();
      rowIndex = Math.min(rows.length - 1, rowIndex + 1);
      break;
    case 'ArrowLeft':
      evt.preventDefault();
      cellIndex = Math.max(0, cellIndex - 1);
      break;
    case 'ArrowRight':
      evt.preventDefault();
      cellIndex = Math.min(rows[rowIndex].cells.length - 1, cellIndex + 1);
      break;
    case 'Enter':
      evt.preventDefault();
      rows[rowIndex].cells[cellIndex].focus();
      break;
    case 'Escape':
      evt.preventDefault();
      table.blur();
      cellIndex = 0;
      rowIndex = 0;
      break;
  }

  rows[rowIndex].cells[cellIndex].focus();
});

使用 JavaScript 可以使表格支持更多类型的交互控制，从而提高用户体验。

总结

在表格管理方面提供无障碍的 Web 设计需要我们遵循正确的表格结构、提供标记和描述、以及提供正确的焦点控制。通过这些技巧，我们可以确保所有用户都能够轻松地阅读和使用表格。

我们可以使用示例代码来完善我们的表格，从而以一种更加友好和易用的方式使用户体验更加完美。无障碍 Web 设计的过程中，我们需要不断学习和实践，以提高我们的设计水平并为用户带来更好的体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f45f87d4982a6eb8ce50d