html - 如何使 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 中，当焦点在“编辑”上且其“(Help)”可见时，下一个 Tab 将不会聚焦任何内容，但“(Help)”会消失。下一个 Tab 将移动到“删除”。

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

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

Answer 1

我刚刚看到他们如何在 YAML CSS 框架中做这样的事情。它们不会干扰 display(或 visibility，就此而言)，只是将元素移出视口(viewport):

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>