Для html-таблицы, которая имеет входные данные формы в ячейках таблицы (кнопки, ссылки), чтобы быть доступной, лучшие практики для поведения клавиш табуляции и клавиш со стрелками?

Question

Я создаю HTML-страницы с таблицами, которые содержат входные данные в ячейках (например, кнопки, текстовые поля) в одном или двух столбцах таблицы. Мне нужно, чтобы эта страница и таблица были доступны (508). Какова наилучшая практика для навигации по такой таблице (с «редактируемыми» входами) в отношении вкладок и клавиш со стрелками? Нужно ли нажимать клавишу табуляции, чтобы перейти в таблицу, а клавиши со стрелками перемещаться внутри таблицы? Должна ли клавиша Tab нажимать и в, и в, и за пределы таблицы? Если клавиша табуляции выполняет навигацию, должны ли клавиши со стрелками выполнять навигацию внутри таблицы?

Answer 1

Практикой best будет не использование таблиц для разметки и форматирования, а использование настоящей системы CSS-сеток. Их много.

Если вы настаиваете на использовании таблиц для разметки, важно, чтобы вы не включали разметку данных, например, элементы <th> или <caption>. Также не используйте элементы <thead>, <tbody> или <tfoot>, поскольку они не нужны.

Вспомогательная технология будет читать таблицы в строках слева направо, поэтому убедитесь, что вашисодержание следует за этой моделью потока. Также избегайте использования вложенных таблиц, так как это вызовет проблемы.

Когда вы закончите, простая таблица макетов может выглядеть примерно так:

<table>
  <tr>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr>
    <td>Third</td>
    <td>Fourth</td>
  </tr>
  <tr>
    <td>Fifth</td>
    <td>Sixth</td>
  </tr>
</table>

Если вам нужно, вы можетеиспользуйте colspan и пустые td ячейки, но будьте очень осторожны, используя rowspan, так как это может вызвать проблемы линеаризации .

Answer 2

Руководство WAI-ARIA Authoring Practices 1.1 для сеток данных содержит следующие рекомендации:

• Стрелка вправо: перемещение фокуса на одну ячейку вправо. Если фокус находится на самой правой ячейке в строке, фокус не перемещается.
• Стрелка влево: перемещает фокус на одну ячейку влево. Если фокус находится на самой левой ячейке в строке, фокус не перемещается.
• Стрелка вниз: перемещает фокус на одну ячейку вниз. Если фокус находится на нижней ячейке столбца, фокус не перемещается.
• Стрелка вверх: перемещает фокус на одну ячейку вверх. Если фокус находится на верхней ячейке в столбце, фокус не перемещается.
• Page Down: перемещает фокус вниз на определенное автором количество строк, обычно прокручивая так, чтобы нижняя строка в видимом в настоящее время наборе строк становиласьодин из первых видимых рядов. Если фокус находится в последней строке сетки, фокус не перемещается.
• Page Up: перемещает фокус вверх на определенное автором количество строк, обычно прокручивая так, что верхняя строка в видимом в настоящее время наборе строк становитсяодин из последних видимых рядов. Если фокус находится в первом ряду сетки, фокус не перемещается.
• Дом: перемещает фокус на первую ячейку в строке, содержащей фокус.
• Конец: перемещает фокус на последнююячейка в строке, содержащей фокус.
• Control + Home: перемещает фокус на первую ячейку в первой строке.
• Control + End: перемещает фокус на последнюю ячейку в последней строке.