如何使 Tab 键导航与弹出窗口一起使用？

Question

我正在努力使导航键盘可访问，以便用户可以通过链接Tab。问题在于，一旦菜单项被聚焦或悬停，就会在菜单项旁边显示弹出窗口。这是一个最小的工作示例：

a.help {
    /* don't show help until explicitly triggered */
    display: none;
}
li:hover + a.help, a:focus + a.help {
    /* show help button when user is about to interact with the original button */
    display: inline;
}
a.help:focus, a.help:hover, a.help:active {
    /* don't hide help button while user interacts with it */
    display: inline;
}

<h3>Actions</h3>
<ul>
    <li><a href="#">Edit</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Delete</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Back</a></li>
</ul>

在 Firefox 45 中，当焦点位于“编辑”并且其“（帮助）”可见时，下一个 Tab 将不会聚焦任何内容，但“（帮助）”会消失。下一个 Tab 将移至“删除”。

在 Chrome 49 中，情况更糟。当焦点位于“编辑”时，下一个 Tab 将不会聚焦任何内容，实际上在下一个 Tab 上的页面第一个链接处重新开始导航。

有什么方法可以在保留一般样式和文档结构的同时完成这项工作？

Answer 1

我刚刚看到他们如何在 YAML CSS 框架中做这样的事情。他们不会混淆display（或visibility，就此而言），只是将元素移出视口：

a.help {
    /* don't show help until explicitly triggered */
    position: relative;
    left: -32768px;
}
li:hover + a.help, a:focus + a.help {
    /* show help button when user is about to interact with the original button */
    left: 0;
}
a.help:focus, a.help:hover, a.help:active {
    /* don't hide help button while user interacts with it */
    left: 0;
}

<h3>Actions</h3>
<ul>
    <li><a href="#">Edit</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Delete</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Back</a></li>
</ul>

Answer 2

您可以使用否定的tabindex 属性将元素移出 Tab 范围：

<h3>Actions</h3>
<ul>
    <li><a href="#" tabindex="1">Edit</a> <a tabindex="-1" href="#">(Help)</a></li>
    <li><a href="#" tabindex="2">Delete</a> <a tabindex="-1" href="#">(Help)</a></li>
    <li><a href="#" tabindex="3">Back</a></li>
</ul>

tabindex=-1

当 tabindex 设置为负整数如 -1 时，它变为 以编程方式可聚焦，但不包含在 Tab 键顺序中。在 换句话说，使用 tab 键的人无法访问它 浏览内容，但可以通过脚本专注于它。

Read more about tabindex

Answer 3

使用“tabindex”属性：

a.help {
    /* don't show help until explicitly triggered */
    display: none;
}
li:hover + a.help, a:focus + a.help {
    /* show help button when user is about to interact with the original button */
    display: inline;
}
a.help:focus, a.help:hover, a.help:active {
    /* don't hide help button while user interacts with it */
    display: inline;
}

<h3>Actions</h3>
<ul>
    <li><a href="#" tabindex="1">Edit</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#" tabindex="2">Delete</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#" tabindex="3">Back</a></li>
</ul>