如何在打开时仅在模式弹出窗口内限制 Tab 键按下?
我打开了一个模式弹出窗口.我有可访问性要求.所以添加了 ARIA 相关的标签.但是当我点击 tab 键时，持续关注到实际页面后面的页面.
I have a modal popup opened. I have accessibility requirement. So added ARIA related labels. But when i click tab key continuously focus going to the page behind the actual page.
在 html 文件中添加了 role="dialog"
但是当模式打开时，我只希望焦点在模式弹出窗口中导航.
But when modal opened i want only the focus navigate within the modal popup.
从事 Angular4, HTML5 项目.如果我们在 HTML 文件中找到解决方案会更好.我的意思是没有添加任何 javascript/jQuery 相关的东西来防止这种情况发生
推荐答案
你问的是焦点陷阱，这个演示很好地展示了它:https://focus-trap.github.io/focus-trap/
You are asking about focus trap, it's nicely demonstrated in this demo: https://focus-trap.github.io/focus-trap/
添加 role="dialog" 不会自动在该元素内提供陷阱焦点.事实上，浏览器并没有原生焦点陷阱.
Adding role="dialog" will not automatically provide trap the focus within that element. In fact, there's no native focus trap provided by browsers.
您需要选择以下选项之一:
You need to go with one of following options:
- 自己实现焦点陷阱(关于此的好文章:https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element)李>
- 使用焦点陷阱的第 3 方解决方案，例如https://github.com/davidtheclark/focus-trap
- 使用模态窗口的第 3 方解决方案，例如https://github.com/sweetalert2/sweetalert2 完全兼容 WAI-ARIA 规范并提供为您准备的焦点陷阱
- implement focus trap by yourself (good article on this: https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element)
- use 3rd party solutions of focus trap, e.g. https://github.com/davidtheclark/focus-trap
- use 3rd party solutions of modal windows, e.g. https://github.com/sweetalert2/sweetalert2 which is fully compatible with WAI-ARIA specifications and provide focus trap for you
相关文章