Question

我正在研究一种模式组件，该组件将在我的组织的网站和数字服务中使用（过去15年来创建的大约17,000个页面，每月有数百万用户）。如您所见，这些页面的差异很大，无法对其全部进行测试。

要最大化此组件的可访问性，我需要在模式已打开的情况下（通过Tab键和/或虚拟光标）将焦点限制在模式上。

我的方法是将处理程序附加到最后一个可聚焦元素上的blur事件上，该事件将焦点返回到模式中的第一个可聚焦元素上。 这绝对可以很好地工作，除非模式中的最后一个可聚焦元素也是页面上的最后一个可聚焦元素，在这种情况下，焦点将返回到浏览器搜索栏。

几天来，我一直对此感到困惑，无法找到任何信息说明为什么会这样。这是一些说明问题的简化代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Focus trap</title>
        <style>button:focus {background-color: orange;}</style>
    </head>
    <body>
    <div id="modal">
        <button id="link-1">Link-1</button>
        <button id="link-2">Link-2</button>
        <button id="link-3">Link-3</button>
    </div>

    <script>
        let last_link = document.getElementById('link-3'),
            first_link = document.getElementById('link-1');

        last_link.addEventListener('blur', () => {
            first_link.focus();
        })
    </script>
    </body>
    </html>

我知道我们可以做的一些事情，但是这些都不是理想的：

尝试拦截键盘事件而不是blur-但我不愿意这样做，因为它可能会排除某些辅助技术的用户
创建并隐藏模式中的其他可聚焦元素-我不愿意这样做，因为它感觉有点破烂

Answer 1

您不能将地址栏或本地工具栏作为焦点。他们会优先考虑您的发言权，幸运的是，这样做的理由非常充分。

该解决方案是您已经提到的两个选项之一：

最后一个元素上的“拦截”选项卡，以及第一个元素上的“ Shift +”选项卡
放置两个隐藏的可聚焦元素，一个在开头，一个在末尾，并在焦点隐藏后立即将焦点移到第一个或最后一个元素。

我看不到通过执行Tab / Shift + Tab拦截会击败哪种辅助技术。如果您考虑触摸界面，无论如何，iOS / Android的工作重点完全不同。如果您考虑使用特殊设备，那么其中许多设备会模拟键盘上的按键，而与触发其操作的有效方式无关。

如果有疑问，第二个看起来更像是黑客，但如果有效地存在一种特殊的移动焦点的方法（而不是通过键盘），则第二个函数会更强大。

在最后一个可聚焦元素上拦截“模糊”事件

1 个答案: