时间戳

首页 > 解决方案 > 如何在没有 tabindex 的情况下将 HTML 表格标签顺序从水平更改为垂直？

html - 如何在没有 tabindex 的情况下将 HTML 表格标签顺序从水平更改为垂直？

问题描述

我有一个这样的 HTML 表：

*---------*----------*
| 单元格 1 | 单元 4 |
*---------*----------*
| 单元格 2 | 单元 5 |
*---------*----------*
| 单元格 3 | 单元 6 |
*---------*----------*

如何在不使用 tabindex的情况下更改标签顺序以从 Cell 1 正确运行到 Cell 6 ？我问这个知道WAI-ARIA 指南不鼓励使用 tabindex来更改单元格的 tab 顺序。

我考虑将表格分成两个元素——左和右——以便它们在 DOM 中具有正确的顺序。但是，此解决方案似乎无法保持自然 HTML 表格的各个方面（例如跨行单元格的高度相等）。

标签： htmlhtml-tabletab-ordering

解决方案

以下内容从一个tab角度工作，但不适用于屏幕阅读器。我<button>在表中使用 a 只是为了演示跳格顺序。

<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td><button>cell 1</button></td>
        </tr>
        <tr>
          <td><button>cell 2</button></td>
        </tr>
        <tr>
          <td><button>cell 3</button></td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td><button>cell 4</button></td>
        </tr>
        <tr>
          <td><button>cell 5</button></td>
        </tr>
        <tr>
          <td><button>cell 6</button></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

要垂直制表，您必须将 cell1-cell3 分组在一个容器中，将 cell4-cell6 分组在另一个容器中，然后并排显示这两个容器。由于您不能让容器跨表中的行，因此您必须使用（嵌套）表作为容器。主表的第一个单元格是嵌套表，因此制表符首先通过嵌套表 (cell1-cell3)。然后跳到主表的第二个单元格，这又是一个嵌套表 (cell4-cell6)。

您可以尝试简化它并将 cell1-cell3 放入 a<div>并让 <div> 成为主表的第一个单元格，但是 cell1-cell3 不会单独位于单独的数据单元格中，但这取决于您是否这很重要。

<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>
      <div>
        <button>cell 1</button><br>
        <button>cell 2</button><br>
        <button>cell 3</button>
      </div>
    </td>
    <td>
      <div>
        <button>cell 4</button><br>
        <button>cell 5</button><br>
        <button>cell 6</button>
      </div>
    </td>
  </tr>
</table>

回到屏幕阅读器，有键盘快捷键可以遍历表格的所有单元格。在 PC 上，使用 JAWS 或 NVDA，它是ctrl++ 。altarrow

所以ctrl++alt会让RightArrow我遍历一行。即使您使用不明智的正值tabindex来控制垂直跳位顺序，它也不会影响屏幕阅读器在表格中导航的方式。因此，如果垂直阅读表格有重要意义，屏幕阅读器用户将失去该意义，可能无法理解您的表格。

需要考虑的几个问题：

  • 这两列是否相关？
  • 该表是显示数据的“真实”表，还是用于布局目的的表？
  • 有列标题吗？

如果可以通过具有足够的行标题来传达垂直跳转的目的，则可能不需要垂直跳转。大多数表格都有列标题，但通常会忽略行标题。它们非常有用。

<table>
  <tr>
    <th scope="col">name</th>
    <th scope="col">age</th>
    <th scope="col">height</th>
  </tr>
  <tr>
    <th scope="row">dave</th>
    <td>12</td>
    <td>4'8"</td>
  </tr>
  <tr>
    <th scope="row">fred</th>
    <td>13</td>
    <td>4'9"</td>
  </tr>
  <tr>
    <th scope="row">henry</th>
    <td>14</td>
    <td>4'10"</td>
  </tr>
</table>

推荐阅读