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

Question

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

* ---------- * ---------- *
| Ячейка 1   | Ячейка 4   |
*----------*----------*
| Cell 2   | Cell 5   |
*----------*----------*
| Ячейка 3   | Ячейка 6   |
*----------*----------*         

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

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

Так что 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>

3

Источник Поделиться

user76714 20 дек '18 в 09:03 2018-12-20 09:03

2018-12-20 09:03