Javascript 截取最后一个可聚焦元素上的“模糊”事件
我正在开发一个模式组件，用于组织的网站和数字服务，在过去15多年中创建了17000个页面，每月有数百万用户。正如您所想象的，这些页面差异很大，不可能全部测试 为了最大限度地提高该组件的可访问性，我需要在模态打开时通过tab键和/或虚拟光标将焦点限制在模态上 我的方法是将处理程序附加到最后一个可聚焦元素上的模糊事件，该事件将焦点返回到模式中的第一个可聚焦元素。除非模式中的最后一个可聚焦元素也是页面上的最后一个可聚焦元素，否则这种方法绝对有效，在这种情况下，焦点将返回到浏览器搜索栏 这几天我一直对此感到困惑，无法找到任何信息来说明为什么会这样。下面是一些简化的代码，说明了这个问题：Javascript 截取最后一个可聚焦元素上的“模糊”事件,javascript,html,dom,accessibility,Javascript,Html,Dom,Accessibility,我正在开发一个模式组件，用于组织的网站和数字服务，在过去15多年中创建了17000个页面，每月有数百万用户。正如您所想象的，这些页面差异很大，不可能全部测试 为了最大限度地提高该组件的可访问性，我需要在模态打开时通过tab键和/或虚拟光标将焦点限制在模态上 我的方法是将处理程序附加到最后一个可聚焦元素上的模糊事件，该事件将焦点返回到模式中的第一个可聚焦元素。除非模式中的最后一个可聚焦元素也是页面上的最后一个可聚焦元素，否则这种方法绝对有效，在这种情况下，焦点将返回到浏览器搜索栏 这几天我一直对此
<!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>
您不能违背地址栏或本机工具栏的焦点。他们优先于你能说的任何话，幸运的是，有很好的理由这样做 解决方案是您已经提到的两个选项之一： 截取最后一个元素上的tab，以及第一个元素上的shift+tab 放置两个隐藏的可聚焦元素，一个在开头，一个在结尾，一旦隐藏的可聚焦元素获得焦点，就将焦点移动到第一个或最后一个元素。 我看不出哪种辅助技术会被tab/shift+tab拦截打败。如果你考虑触摸界面，不管怎样，iOS/Android在focus上的工作方式完全不同。 如果你想一想特殊的设备，它们中的许多都是模拟按下键盘上的键，而与触发它们动作的有效方式无关
如果有疑问，第二种方法看起来更像黑客，但如果有一种特殊的方法来移动焦点，而不是通过键盘移动焦点，那么这种方法会更有效。感谢您在这方面的帮助。