打开时如何限制仅在模态弹出窗口中按下 Tab 键?

新手上路,请多包涵

我打开了一个模态弹出窗口。我有可访问性要求。所以添加了ARIA相关标签。但是,当我单击 Tab 键时,会持续关注实际页面后面的页面。

在 html 文件中添加 role=“dialog”

但是当模态打开时,我只希望焦点在模态弹出窗口中导航。

致力于 Angular4, HTML5 项目。 如果我们在 HTML 文件本身中找到解决方案会更好我的意思是没有添加任何 javascript/jQuery 相关的东西来防止这种情况

原文由 Gnik 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 805
1 个回答

你问的是 focus trap ,在这个演示中很好地展示了它: https ://focus-trap.github.io/focus-trap/

添加 role="dialog" 不会自动提供该元素内的陷阱焦点。事实上,浏览器并 没有提供原生的焦点陷阱

您需要选择以下选项之一:

原文由 Limon Monte 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题