辅助功能角色申请答案

【问题标题】：Accessibility Role Application辅助功能角色申请
【发布时间】：2018-06-11 12:46:02
【问题描述】：

以下是我们的网络应用程序的虚拟实现 https://roleapplication.herokuapp.com/index.html

appArea 元素具有角色应用程序，因为它包含高度复杂的小部件，例如 ms paint/editor/ms office。 Navigator 包含标准的 Web 小部件，例如下拉菜单和按钮

HTML 类似于下面指定的内容。

<body> <div class="appArea" role="application"> .......//Complex widgets </div> <div class="toolbar"> ......//Buttons, dropdowns </div> </body>

appArea 的键盘功能由其代码处理，而对于工具栏，我们依赖于屏幕阅读器的键盘处理，因为它们在 Web 浏览器中工作。

问题 - 当用户在导航器区域按下 Escape 时，我们会模糊导航器，因此默认情况下焦点会转到正文。现在焦点在正文中，然后箭头键将焦点移动到工具栏，因此用户永远无法进入 appArea。如果焦点在 appArea 中，它可以正常工作。

期望 - 当焦点在身体上时，按下箭头焦点应该在 appArea 内，然后 appArea 将获得键而不是屏幕阅读器。

在页面加载和不带屏幕阅读器时检查向下箭头键功能。

键盘笔记

按 f6 从小部件 1 转到小部件 2 再到导航器
您可以使用小部件中的箭头/Tab 键进行导航。
使用 f6 移动到导航器并按 Tab 转到任何按钮，然后按 Escape。现在重点是身体（检查使用 document.activeElement)。
如果没有屏幕阅读器，即使没有焦点，我们的小部件也会捕获正文上的键并对其进行处理。
但是对于屏幕阅读器，当正文具有焦点并且用户按下向下箭头时，屏幕阅读器会消耗键并将焦点移动到导航器而不是具有小部件的应用程序区域，并且用户无法使用箭头键或其他键转到 appArea哪个屏幕阅读器使用。

注意-

如果我们将角色应用程序交给完整的应用程序，那么导航器的默认箭头键处理将停止工作，这是不需要的
无法删除角色应用程序，因为 appArea 非常复杂，数百个小部件都有其键盘处理功能。

【问题讨论】：

标签： accessibility wai-aria screen-readers jaws-screen-reader nvda

【解决方案1】：

可以通过三种方式与 role="application" 进行交互。

在应用程序元素上按回车键，退出编辑模式（或表单模式）并像使用另一个网页一样使用应用程序。您可以将其他元素放在那里，屏幕阅读器将以浏览模式在这些元素中移动。
在应用程序上按 Enter 键，这会将屏幕阅读器弹出到编辑模式，其中所有键都传递到应用程序内的编辑小部件。并且您处理应用程序中的所有内容，可能是在 keydown 事件中。
在屏幕阅读器按下按键时使用roving tabindex 控制tabindex。

您目前有 1 和 3，这确实令人困惑。如果您删除了应用程序元素，它仍然可以正常工作。听起来好像你想要2。除非您有屏幕阅读器用户不断测试 UX 或构建您的应用程序，否则强烈建议不要使用 2。 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 提供的现有编辑字段，例如： This text editor example

如果您出于某种原因不想使用上述小部件，请告诉我。

您可以将 3 与普通小部件一起使用，但最好执行 Google Drive 的功能，并允许用户在页面加载时进入编辑模式，或者按一个键（如转义键）进入 tabindex 应用程序区域（不需要在应用程序元素中，尽管可以）。

编辑：再次阅读您的问题后，听起来好像您无法弄清楚如何输入应用程序元素。您将箭头指向屏幕阅读器显示“应用程序”的位置，然后按 Enter。要退出，您可以使用 Tab 键转到应用程序外部的下一个 tabindex 元素，或者按特殊键命令退出应用程序。在 NVDA 中，此键命令是 ctrl+nvda+space。在您的应用程序中，应用程序元素是第一个元素。

【讨论】：

是的，问题是关于如何进入应用程序，但在我们的例子中，我们不能强制用户按下回车键。那么有什么方法可以指定如果焦点在主体上，它应该处于应用程序模式。
添加一个具有 autoFocus="true" 的输入元素，如按钮，如上例所示。这将使用户默认关注该按钮，然后您可以将 preventDefault 放在 onKeyDown 事件上，这将允许应用程序捕获大多数（但不是全部）击键，甚至是 alt。 Windows 和 FN 是唯一没有进入该 preventDefault 的两个键，因此也许您可以将 windows 键设置为 alt+windows，或者您可以将左 alt 键切换为 windows 键。如果您正在模拟 Windows 计算机，屏幕阅读器用户会大量使用 Windows 键盘命令。

【解决方案2】：

role='application' 应在极少数情况下使用。如您所述，它会导致所有键盘事件跳过屏幕阅读器并直接转到您的应用程序。这会导致屏幕阅读器虚拟光标不起作用。通常，对于某些类型的小部件，例如输入字段，屏幕阅读器会自动进入“应用程序”模式（通常称为“表单模式”）。如果您使用widget roles，您将免费获得这种“表单模式”。

当您说“箭头键”不起作用时，您指的是上/下箭头还是左/右箭头？它们对屏幕阅读器有不同的行为。

【讨论】：

之所以使用角色应用程序，是因为小部件非常复杂，类似于 word 等完整的办公应用程序。这就是我们使用角色应用程序的原因，因为其他角色似乎都不合适
现在，当焦点在 body 上时，屏幕阅读器会捕获箭头键，因为它在 role="application" 之外，而我们需要它由我们的应用程序处理。我们不能将角色应用程序移动到正文，因为我们有其他元素是普通的 html 元素
好的，试图理解原来的问题。当您说“焦点在身体上”时，您的意思是键盘焦点在实际的<body> 标签上吗？ <body> 上没有 tabindex，因此它无法获得焦点。还是您的意思是屏幕阅读器焦点？您正在使用屏幕阅读器中的向上/向下键将“焦点”移动到每个 DOM 元素？你有我可以尝试的示例网站吗？
正文有tabindex。我已经更新了这个问题。让我尝试创建一个示例并返回。
我看到您将tabindex="-1" 添加到<body> 中，但这仍然不允许键盘焦点移动到正文，除非来自javascript。用户不能标签到正文。如果您澄清是使用 TAB 键移动焦点还是使用了屏幕阅读器 DOM 导航键（上/下），这将有所帮助。