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

问题描述

我正在尝试使我的 ember.js 应用程序更易于访问，并且正在通过 Apple 的内置 VoiceOver 实用程序进行测试.我正在根据需要添加 ariaRoles- 导航目的不明确的标签属性.我在关注模态警报时遇到了问题，因为读者的注意力集中在模态后面的页面项目上.有没有人有处理屏幕阅读器模式警报的经验?我的印象是，在我的视图中声明ariaRole:'alertDialog'"会为此类对话框设置适当的角色，并且此角色的焦点行为可能因屏幕阅读器而异.谢谢！！！

解决方案

我对模态的东西没有第一手经验.从本质上讲，您的问题是您正在扮演 ARIA 角色，并希望它能奏效.你需要做的不止这些.您需要牢记以下几点:

• 按下链接/按钮后，将焦点移至模式窗口/对话框/弹出窗口.大多数模态元素只是一个
  .你可以给

  一个tabindex="-1"的属性.
• 在模态窗口内捕获焦点.
• 允许用户按退出键关闭
• 关闭时，将焦点移回链接/按钮

资源

• 带灯箱的键盘可访问性
• UX StackExchange 的类似问题
• Demo modal dialog - 我认为这仍在开发中(我有一段时间没有收到作者的消息).
• jQuery Google 群组线程(汉斯是这方面的佼佼者或其中之一)

I am 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!!!

解决方案

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:

• 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

Resources

• 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屋！