Как сделать `<tr>` доступным с клавиатуры (без JavaScript)

Question

Контекст: я использую загрузчик 4.1 в приложении vue.js.

У меня есть таблица, которая показывает результаты поиска, выполненного пользователем.

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

Как сделать такую ​​же таблицу доступной с клавиатуры?

Ожидаемый результат:

1. пользователи выполняют поиск
2. данные приведены в таблице
3. нажатием TAB они фокусируют <table>
4. (выделена текущая строка)
5. , нажав ENTER , они могут "видеть больше деталей" данной выделенной строки

Вопросы:

• Есть ли встроенный в браузер способ добиться этого?
• Есть ли способ сделать это без JavaScript?

---

---

Пока:

Это делается с помощью элемента <table> с tabindex="0" на каждом элементе <tr>. Теперь я добавляю магию javascript, чтобы триггер взаимодействия с пользователем при нажатии и вводе отображал больше деталей в другом div. Спасибо всем за помощь.

Answer 1

Я почти уверен, что решение CSS не будет доступно.

На самом деле решение CSS даже, вероятно, сделает доступность менее хорошей по сравнению с тем, если вы использовали <table> даже без JavaScript или ARIA.

Если вы действительно не можете использовать JavaScript по какой-либо причине, я бы все же посоветовал оставить <table>

Если представленные данные являются действительно табличными данными, пользователи программы чтения с экрана ничего не поймут, если вы не используете истинную <table>.

Некоторые программы чтения с экрана пытаются представить таблицы CSS, как если бы они были настоящими таблицами HTML, но часто им не удается сделать это действительно хорошо, и многие программы чтения с экрана не делают ничего особенного, поэтому пользователь видит серию элементов div и span.

Кроме того, пользователи клавиатуры и программы чтения с экрана привыкли к: - вкладка один раз, чтобы попасть в таблицу, вкладка еще раз, чтобы выйти из нее - стрелка вверх / вниз для перемещения от строки к строке внутри таблицы - стрелка влево / вправо для перемещения между столбцами, если это актуально в вашем случае

Если вы действительно хотите что-то доступное, это то, что вам нужно сделать. И это совершенно невозможно отменить без JavaScript.

Почему вы не хотите использовать JavaScript?

Answer 2

Вы можете использовать tabindex для таблицы, она отлично работает

<form>
  First: <input tabindex="1" type="text">
  Third: <input tabindex="3" type="text"> <br>
  Second : <input tabindex="2" type="text">
  Forth : <input tabindex="4" type="text"><br>
</form>

Answer 3

Это примерно так близко, как я думаю, вы можете получить без JavaScript.

Вам необходимо использовать таблицы CSS, а не таблицы HTML, и установить тег a как table-row. Затем установите «href» тега a в скрытый div с дополнительной информацией. Используйте класс :target psuedo, чтобы сделать скрытую информацию видимой.

Теперь вы можете вкладывать через строки. Однако вам нужно нажать Return , чтобы активировать ссылку (хотя бы в Chrome)

.table {
  display: table;
}

.table>.head,
.table>a {
  display: table-row;
}

.table>.head>span,
.table>a>span {
  display: table-cell;
  padding: 5px;
}

.table>a:focus {
  background-color: #CCC;
}

.moreInfo>div {
  display: none;
}

.moreInfo>div:target {
  display: block;
}

<div class="table">
  <div class="head">
    <span>Id</span>
    <span>Name</span>
    <span>Date</span>
  </div>
  <a href="#data1">
    <span>1</span>
    <span>Some Name</span>
    <span>9 Jan 2019</span>
  </a>
  <a href="#data2">
    <span>2</span>
    <span>Another Name</span>
    <span>10 Jan 2019</span>
  </a>

</div>
<div class="moreInfo">
  <div id="data1">Some more info on the first item</div>
  <div id="data2">Some more info on the second item</div>
</div>

Answer 4

Я не могу представить себе другого пути без использования JavaScript! Вот ответ на ваш вопрос!

Вы должны использовать tabindex = "0" . Но чтобы сосредоточиться, вам придется использовать javascript

<div>
<a href="#" tabindex="0">
      <p>hi</p>
</a>
<a href="#">
   <p>hello</p>
</a>
<a href="#">
   <p>woah</p>
</a>
<a href="#">
   <p>oops</p>
</a>
<a href="#">
   <p>Love</p>
</a>
</div>