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

Question

我有一个这样的 HTML 表格:

*----------*----------*| Cell 1   | Cell 4   |*----------*----------*| Cell 2   | Cell 5   |*----------*----------*| Cell 3   | Cell 6   |*----------*----------*         

如何更改选项卡顺序以在不使用 tabindex 的情况下从单元格 1 正确运行到单元格 6？我问这个知道 WAI-ARIA guidelines discourage the use of tabindex更改单元格的 Tab 键顺序。

我考虑过将表格分成两个元素——左边和右边——这样它们在 DOM 中就会有正确的顺序。但是，此解决方案似乎无法保持自然 HTML 表格的各个方面(例如单元格行之间的高度相等)。

Answer 1

以下内容从 tab 角度来看有效，但对屏幕阅读器不有效。我正在使用 <button>在表中只是为了演示 Tab 键顺序。

<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 分组在另一个容器中，然后并排显示这两个容器。由于您不能让容器跨表中的行，因此您必须使用(嵌套)表作为容器。主表的第一个单元格是嵌套表，因此 Tab 键首先经过嵌套表 (cell1-cell3)。然后跳转到主表的第二个单元格，这也是一个嵌套表 (cell4-cell6)。

你可以尝试简化它，将 cell1-cell3 放在 <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+alt+arrow。

所以 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>

关于html - 如何在没有 tabindex 的情况下将 HTML 表格选项卡顺序从水平更改为垂直？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53859681/