设置屏幕阅读器的焦点在ember上的模态警报 [英] Setting focus of a screen reader on a modal alert in ember

问题描述

我试图让我的ember.js应用程序更容易访问，并通过Apple内置的VoiceOver实用程序进行测试。我正在根据需要添加 ariaRoles 并查看咏叹调，导航目的不清楚的标签属性。由于读者的重点仍放在模态背后的页面上，所以我将重点放在模态警报上。有人有经验关注屏幕阅读器的模态警报吗？我的印象是，在我的观点中声明ariaRole：alertDialog为这样一个对话框设置了适当的角色，并且这个角色的焦点行为有可能在屏幕阅读器之间不同。谢谢！！！

I'm attempting to make my ember.js app more accessible and am doing my testing via Apple's built-in VoiceOver utility. I'm adding ariaRoles as necessary to my views and tacking on aria-label attributes where the purpose of navigation is unclear. I'm having issues getting the focus on modal alerts, as the reader's focus stays on the page items behind the modal. Does anyone have experience handling focus on modal alerts for screen readers? I'm under the impression that declaring "ariaRole:'alertDialog'" in my view sets the appropriate role for such a dialog, and it is possible that the focus behavior for this role differs between screen readers. Thanks!!!

推荐答案

我没有模态的第一手经验。实质上你的问题是你正在抛出一个ARIA角色，并期待它能奏效。你需要做的更多。您需要注意以下事项：

I don't have first hand experience with modal stuff. Essentially your issue is you are throwing on an ARIA role, and kind of expect it to work. You need to do more than that. You need to keep the following in mind:

• 按下链接/按钮后，将焦点移动到模态窗口/对话框/弹出窗口。大多数模态元素只是一个< div> 。您可以将< div> 属性 tabindex = - 1。


• 在模式窗口内捕获焦点。


• 允许用户按逃生关闭


• 关闭时，将焦点移回到链接/ button

• Once the link/button is pressed, move focus to the modal window/dialog/popup. Most modal elements are simply a <div>. You can give the<div> an attribute of tabindex="-1".
• Trap focus inside the modal window.
• Allow the user to press escape to close
• When closed, move focus back to link/button

资源

• 带灯箱的键盘辅助功能


• UX StackExchange中的类似问题


• 演示模式对话框 - 我认为这还在开发（我没有从作者那里听到一段时间）。


• jQuery Google Group线程
  （汉斯是这个东西的顶级人物之一）

• keyboard accessibility with lightboxes
• Similar question at UX StackExchange
• Demo modal dialog - I think this is still under dev (I haven't heard from the author for a while).
• jQuery Google Group thread (Hans is the top guy or one of, for this stuff)

这篇关于设置屏幕阅读器的焦点在ember上的模态警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！