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

Question

我正在努力使导航键盘可访问，以便用户可以 Tab 通过 links。问题在于弹出窗口将在菜单项获得焦点或悬停后显示在菜单项旁边。这是一个最小的工作示例：

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 中，当焦点位于 "Edit" 且其“（帮助）”可见时，下一个 Tab 将不会聚焦任何内容，但“（帮助）”消失。下一个 Tab 将移动到 "Delete".

在Chrome49，更惨。当焦点在 "Edit" 上时，下一个 Tab 将不会聚焦任何内容，实际上在页面的第一个 link 处重新启动导航到下一个 Tab.

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

Answer 1

使用"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>

Answer 2

我刚刚看到他们如何在 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 3

您可以使用否定 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

When tabindex is set to a negative integer like -1, it becomes programmatically focusable but it isn’t included in the tab order. In other words, it can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.

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

How can I make Tab-key navigation work with popups?

html

css

accessibility

keyboard-navigation