时间戳

首页 > 解决方案 > 无障碍角色申请

accessibility - 无障碍角色申请

问题描述

以下是我们的 Web 应用程序的虚拟实现 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 将获得键而不是屏幕阅读器。

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

键盘音符

笔记 -

标签： accessibilitywai-ariascreen-readersjaws-screen-readernvda

解决方案

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

  1. 在应用程序元素上按回车键，退出编辑模式（或表单模式）并像使用另一个网页一样使用应用程序。您可以将其他元素放在那里，屏幕阅读器将以浏览模式在这些元素中移动。

  2. 在应用程序上按 Enter 键，屏幕阅读器进入编辑模式，其中所有键都传递到应用程序内的编辑小部件。并且您处理应用程序中的所有内容，可能是在 keydown 事件中。

  3. 当屏幕阅读器使用流动的 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 提供的现有编辑字段，例如： 此文本编辑器示例

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

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

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

推荐阅读