Как изменить порядок вкладок таблицы HTML с горизонтального на вертикальный без tabindex?

Question

У меня есть такая HTML-таблица:

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

Как изменить порядок табуляции для правильного запуска с ячейки 1 на ячейку 6 без использования tabindex ?Я спрашиваю это, зная, что руководящие принципы WAI-ARIA не рекомендуют использовать tabindex для изменения порядка табуляции ячеек.

Я рассмотрел возможность разбить таблицу на два элемента - левый и правый- чтобы они имели правильный порядок в DOM.Однако это решение, похоже, не поддерживает аспекты естественной таблицы HTML (например, одинаковую высоту между строками ячеек).

Answer 1

Следующее работает с перспективы tab , но not работает для программы чтения с экрана.Я использую <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>

Возвращение к экрануЧитатель, есть сочетания клавиш для перемещения по всем ячейкам таблицы.На ПК, используя JAWS или NVDA, это ctrl + alt + arrow .

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