使用 <a> 元素而不是 <tr> 来获取可点击的行

Question

我想在 html 表格中创建可点击的行。每一行都应该是一个指向不同页面的链接。我当然可以添加 onclick 处理程序，但这会创建一种糟糕的 UI - 可访问性差，没有键盘导航，没有右键/中键...

我找到了更好的方法。不要使用普通的table 元素，而是通过css display 规则强制divs 充当不同的表格标签。对于行，使用 a-s，并带有适当的 href 属性。

这就是我的意思：

  .table {
    display: table;
    border-collapse: collapse;
    font-family: sans-serif;
    width: 100%;
  }
  .thead {
    display: table-header-group;
  }
  .tbody {
    display: table-row-group;
  }
  .td, .th {
    display: table-cell;
    padding: 5px 10px;
    text-align: center;
  }
  .tr {
    display: table-row;
  }
  .thead > .tr {
    background: #ccc;
    color: #555;
  }
  a.tr {
    text-decoration: none;
    color: black;
  }
  a.tr:hover {
    background: #eee;
    cursor: pointer;
  }

  <div class="table">
    <div class="thead">
      <div class="tr">
        <div class="th">ID</div>
        <div class="th">Name</div>
      </div>
    </div>
    <div class="tbody">
      <a class="tr" href="524.html">
        <div class="td">524</div>
        <div class="td">John Smith</div>
      </a>
      <a class="tr" href="331.html">
        <div class="td">331</div>
        <div class="td">Miles Corner</div>
      </a>
    </div>
  </div>

请注意行是如何可点击的，您可以通过标签浏览它们，并且有一个很好的工具提示显示您将转到的链接。比 onclick 好多了。

如果我使用像 React 这样的框架，我什至不必用 div-s 替换所有元素。我可以添加<a> 标签而不是<tr>s，它会起作用。

我的问题是，有什么问题？我错过了什么？是否有一些可访问性、浏览器兼容性或其他不这样做的原因？

Answer 1

有一些问题，我建议另一种更易于访问和更通用的 UI 模式：

使用带有主键（或对用户最重要的信息）的单元格，在其文本周围放置一个<a>。在您的情况下，这可能是名称列。

<td><a href="…">John Simth</a></td>

这不仅解决了您的可访问性问题，还解决了我们通常在表格中考虑的其他设计问题。

• 为了便于访问，您的解决方案中没有公开表结构。这可以通过aria-role 解决，但不建议这样做，并且支持可能会有所不同。这种结构对于在表格内导航很重要，通常通过箭头键（网格导航）
• 表数据 TD 和表头 TH 之间的关系未标记。这在您的示例中可能并不重要，因为名称很明显，但是随着数据的增多，它变得非常重要
• 任何交互式元素（如链接）都需要具有焦点。通过 Tab 键，您可以导航到它，然后使用 Space 或 Enter 激活它
• 这个焦点需要在视觉上很明显（您可以添加一个 .tr:focus 类并为您的行设置不同的样式）
• 如果您在表格行中添加复选框，这些复选框也需要具有焦点。因此，通过提供经典链接，您将兼容。
• 经典表格行不提供使用户直观地单击它的启示。链接确实并且被广泛理解