以下是我们 Web 应用程序的虚拟实现 https://roleapplication.herokuapp.com/index.html
appArea 元素具有角色应用程序,因为它包含高度复杂的小部件,例如 MS Paint/Editor/MS Office。 导航器包含标准的 Web 小部件,例如下拉列表和按钮
HTML 类似于下面指定的内容。
<body>
<div class="appArea" role="application">
.......//Complex widgets
</div>
<div class="toolbar">
......//Buttons, dropdowns
</div>
</body>
appArea 的键盘功能由其代码处理,对于工具栏,我们依靠屏幕阅读器的键盘处理,因为它们在 Web 浏览器中工作。
问题 - 当用户在导航器区域中按转义时,我们会模糊导航器,因此默认情况下焦点转到正文。 现在,由于焦点在正文中,箭头键将焦点移动到工具栏,因此用户永远无法进入appArea。如果焦点在应用程序区域中,则工作正常。
期望 - 当焦点在正文上时,按下向下箭头的焦点应该在 appArea 内,然后 appArea 将获得键而不是屏幕阅读器。
在加载页面时检查向下箭头键功能,无论是否加载屏幕阅读器。
键盘笔记
- 按 f6 从小部件 1 转到小部件 2 再到导航器
- 您可以使用小部件中的箭头/Tab 键进行导航。
- 使用 f6 移动到导航器,然后按 Tab 转到任何按钮,然后按 Esc 键。现在重点是身体(检查使用 document.activeElement)。
- 如果没有屏幕阅读器,我们的小部件会捕获正文上的键并处理它,即使它们没有焦点。 但是,对于屏幕阅读器,当正文具有焦点并且用户
- 按下向下箭头时,屏幕阅读器会消耗该键并将焦点移动到导航器而不是具有小部件的应用程序区域,并且用户无法使用箭头键或屏幕阅读器消耗的其他键转到appArea。
注意-
- 如果我们给角色应用程序以完成应用程序,那么导航器的默认箭头键处理将停止工作,这是不需要 的
- 删除角色应用程序是不可能的,因为appArea非常复杂,有数百个小部件都有其键盘处理。
有三种方法可以与role="application"进行交互。
在应用程序元素上按回车键,退出编辑模式(或表单模式),然后像使用另一个网页一样使用应用程序。您可以将其他元素放在那里,屏幕阅读器将以眉毛模式在这些元素之间移动。
在应用程序上按回车键,屏幕阅读器将弹出进入编辑模式,所有键都传递到应用程序内的编辑小部件。 并且您处理应用程序中的所有内容,可能是在 Keydown 事件上。
当屏幕阅读器使用浮动 tabindex 按下键时控制 tabindex。
您目前有 1 和 3,这真的很令人困惑。如果您删除了应用程序元素,它仍然可以正常工作。听起来好像你想要 2 个。强烈建议不要使用 2,除非您有屏幕阅读器用户不断测试 UX 或构建您的应用。数字 2 主要用于游戏,被认为是屏幕阅读器的"画布"元素。 您可以通过执行以下操作来执行 2:
<div role="application">
<input type="button" autoFocus="true" value="Click me" />
<p aria-live="polite" id="spk"></p>
</div>
spk 元素是将消息发送到屏幕阅读器,您需要在此窗口、图标、菜单、消息 (WIMM) 界面中执行此操作。请记住,在这种模式下,您需要对所有内容进行编程,如果不满足期望,用户会感到不安。
你说你正在做一个文字处理器。最后一个选项(数字2)并不意味着要制作文字处理器。作为屏幕阅读器用户,我对文字处理器有期望和工作流程。您无法通过在 Javascript 中手动编程来获得该功能。 相反,请使用 HTML 为此原因提供的现有编辑字段,例如: 此文本编辑器示例
如果您有某些原因不想使用上述小部件,请告诉我。
您可以将 3 与普通小部件一起使用,但最好执行 Google Drive 所做的操作,并允许用户在页面加载时进入编辑模式,或者按一个键(如 ese)进入 tabindex 应用程序区域(不需要在应用程序元素中,尽管它可以)。
编辑:再次阅读您的问题后,听起来好像您无法弄清楚如何输入应用程序元素。您箭头到屏幕阅读器显示"应用程序"的位置,然后按回车键。要退出,您可以按 Tab 键转到应用程序外部的下一个 tabindex 元素,或者按特殊键盘命令退出应用程序。在NVDA中,这个键盘命令是ctrl + nvda + space。在应用程序上,应用程序元素是第一个元素。
role='application'
应该在极少数情况下使用。 如前所述,它会导致所有键盘事件跳过屏幕阅读器并直接转到您的应用。 这会导致屏幕阅读器虚拟光标不起作用。 通常,屏幕阅读器将自动进入某些类型的小部件(例如输入字段)的"应用程序"模式(通常称为"表单模式")。 如果您使用的是小部件角色,您将免费获得此"表单模式"。
当您说"箭头键"不起作用时,您是在谈论向上/向下箭头还是向左/向右箭头? 它们对屏幕阅读器有不同的行为。