如何在打开时仅在模式弹出窗口内限制 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

这篇关于如何在打开时仅在模式弹出窗口内限制 Tab 键按下?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！