如何通过键盘访问``（无JavaScript）

Question

上下文：我正在vue.js应用中使用bootstrap 4.1。

我有一张表，显示用户执行搜索的结果。

用户可以通过单击此结果表的任何行来“查看模式详细信息”。到目前为止，鼠标效果很好。

如何使用键盘访问同一张桌子？

预期结果：

1. 用户执行搜索
2. 数据显示在表格中
3. 通过按 TAB 可以使<table>
聚焦
4. （“当前行”突出显示）
5. 通过点击 ENTER ，他们可以“查看更多详细信息”给定突出显示的行

问题：

• 是否有浏览器本地方法可以实现这一目标？
• 有没有JavaScript的方法吗？

---

---

到目前为止：

这是通过将<table>元素与每个tabindex="0"元素上的<tr>一起使用来完成的。 我现在要添加一些JavaScript魔术，以触发点击/输入用户互动，以在另一个div中显示更多详细信息。 谢谢大家的帮助。

Answer 1

这与我想不到的使用JavaScript差不多。

您需要使用css表而不是HTML表，并将a标记设置为table-row。然后将a标记的“ href”设置为具有更多信息的隐藏div。使用:target伪类使隐藏的信息可见。

您现在可以在所有行中 tab 。但是，您需要按 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 2

我非常确定CSS解决方案将不可访问。

实际上，与即使没有任何JavaScript或ARIA的情况下使用<table>相比，CSS解决方案也可能使可访问性变差。

如果您出于某种原因确实无法使用JavaScript，我仍然建议您保留<table>

如果显示的数据确实是表格数据，那么如果您不使用真实的<table>，屏幕阅读器用户将一无所知。

一些屏幕阅读器试图呈现CSS表，就像它们是真正的HTML表一样，但是通常它们做得并不好，许多屏幕阅读器没有做任何特殊的事情，因此用户看到了一系列的div和span。

此外，键盘和屏幕阅读器用户还习惯于： -一次跳入表格，再次跳出表格 -向上/向下箭头在表格内在行与行之间移动 -如果与您的情况相关，则在各列之间移动左/右箭头

如果您确实想要一些可访问的内容，那就是您需要做的。如果没有JavaScript，则完全无法撤消。

您为什么不想使用JavaScript？

Answer 3

如果不使用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>

Answer 4

您可以为表使用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>