Question

我正在使用键盘（Tab键，shift + tab键）浏览整个网页，一切工作正常。此外，当我一直按Tab键时，焦点会循环显示所有元素（地址栏，元素，返回地址栏等）。

现在在某些情况下，我的内容上有一个模态和透明叠加层。现在当发生这种情况时，当我使用tab键时，我从左侧菜单移动到叠加层，并从叠加层上的最后一个可聚焦元素移动，我必须强制将焦点移动到body元素（或地址栏）。所以基本上当有叠加层时，我想忽略叠加层下面的元素。有什么方法可以干净利落地实现它吗？

我在考虑为叠加层下的所有元素设置tabindex = -1，但任何其他更好的方法都是最受欢迎的

由于

Answer 1

这是一个古老的问题，但是我今天才遇到这个问题，所以我想分享我的解决方案。

只要您知道叠加层中各项的选项卡顺序，就可以在最后一项上添加模糊事件侦听器，并使用它将焦点移回叠加层中的第一项：

lastElementInOverlay.addEventListener('blur', function() { firstElementInOverlay.focus(); });

令我惊讶的是，这比更改覆盖下的所有元素的tabIndex（然后在覆盖消失后必须将其更改回）要容易得多。

Answer 2

我在考虑为叠加层下的所有元素设置tabindex = -1，但任何其他更好的方法都是最受欢迎的

这是我在修复元素标签时通常会做的事情。

我能想到另外一个解决方案：将overlay tab-element设置为低于其余的。例如：

<div menu>
    <a tabindex="10">
    <a tabindex="11">
    <a tabindex="12">
</div>
[...other code with tabindex > 10]
<div overlay>
    <a tabindex="1">
    <a tabindex="2">
    <a tabindex="3">
</div>

这样做的缺点是，在您通过覆盖标签后，您将再次进入菜单。

Answer 3

您可以为叠加层的最后一个可聚焦HTML元素分配一个像“ lastFocusableOverlayElement”这样的ID，并在离开最后一个元素的焦点时将焦点分配给触发元素（例如“菜单按钮”）：

$('#lastFocusableOverlayElement').on('blur', function(){
    if ($("body").hasClass("overlay-is-open")){
        $('#toggleOverlay').focus();
    }
});

就我而言，无论覆盖层是否打开，最后一个可聚焦元素始终可见。因此，我需要一个if查询。如有必要，可以省略。

Answer 4

这个问题的“现代/未来”解决方案似乎是 inert 属性...

以上面的例子为例，它看起来像这样，打开了叠加层

<div id="menu" inert>
    <a>
    <a>
    <a>
</div>
[...other code with tabindex]
<div id="overlay">
    <a>
    <a>
    <a>
</div>

现在因为 inert 仍在进行中；您需要使用以下 polyfill（暂时）：https://github.com/WICG/inert

防止叠加后面的元素的选项卡

4 个答案: