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会更改单元格的制表顺序。

我已经考虑过将表格分为左右两个元素，以便它们在DOM中具有正确的顺序。但是，此解决方案似乎并不能保持自然HTML表的各个方面（例如，单元格行之间的高度相等）。

Answer 1

以下内容从选项卡的角度起作用，但无效不适用于屏幕阅读器。我在表中使用<button>只是为了演示跳位顺序。

<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放在<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 + 箭头。

所以 ctrl + alt + RightArrow 可以让我遍历行。即使您为tabindex使用了不正确的正值来控制垂直制表符顺序，它也会不影响屏幕阅读器浏览表格的方式。因此，如果垂直阅读桌子有重要意义，那么屏幕阅读器用户将失去这种含义，并且可能无法理解您的桌子。

要考虑的几个问题：

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

如果可以通过具有足够的 row 标头来传达垂直制表的目的，那么

垂直制表符就没有必要了。大多数表都具有列标题，但通常不使用行标题。它们非常有用。

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

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

1 个答案: