在ember中将屏幕阅读器的焦点设置为模态警报

Question

我试图让我的ember.js应用程序更容易访问,并通过Apple的内置VoiceOver实用程序进行测试.我正在根据我的观点添加ariaRoles并添加导航目的不明确的aria-label属性.我在关注模态警报时遇到了问题,因为读者的注意力集中在模态背后的页面项上.有没有人有经验处理专注于屏幕阅读器的模态警报？我的印象是在我的视图中声明"ariaRole:'alertDialog'"为这样的对话设置了适当的角色,并且这个角色的焦点行为可能在屏幕阅读器之间有所不同.谢谢!!!

Answer 1

我对模态的东西没有第一手经验.基本上你的问题是你正在投入ARIA角色,并期望它能够发挥作用.你需要做的不仅仅是这些.您需要牢记以下几点:

• 按下链接/按钮后,将焦点移至模态窗口/对话框/弹出窗口.大多数模态元素只是一个<div>.你可以给出<div>一个属性tabindex="-1".
• 陷阱焦点在模态窗口内.
• 允许用户按下escape以关闭
• 关闭时,将焦点移回链接/按钮

资源

• 键盘与键盘的可访问性
• UX StackExchange上的类似问题
• 演示模式对话框 - 我认为这仍然是开发人员(我暂时没有收到作者的消息).
• jQuery谷歌集团线程 (汉斯是顶级人物或者其中之一)