Question

以下是我们的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浏览器中工作。

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

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

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

键盘注释

按f6从小部件1转到小部件2到导航器
您可以使用小部件中的箭头/标签键进行导航。
使用f6移至导航器，然后按Tab键转到任意按钮，然后按escape键。现在重点是身体（检查使用 document.activeElement）。
如果没有屏幕阅读器，我们的小工具会抓住身体上的钥匙并处理它，即使他们没有焦点。
然而，对于屏幕阅读器，当身体有焦点并且用户按下箭头时，屏幕阅读器会消耗该键并将焦点移动到导航器而不是具有小部件的应用区域，并且用户无法使用箭头键或其他键进入appArea哪个屏幕阅读器消耗。

注意 -

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

Answer 1

有三种与role =“ application”进行交互的方式。

在应用程序元素上输入，退出编辑模式（或表单模式），并像使用其他网页一样使用该应用程序。您可以在其中放置其他元素，屏幕阅读器将以浏览模式在这些元素之间移动。
在应用程序上按Enter，将屏幕阅读器弹出到编辑模式，在此模式下，所有键都传递到应用程序内的编辑小部件。然后您就可以处理应用程序中的所有内容，可能是发生按键事件。
在屏幕阅读器使用roving tabindex按下键时控制tabindex。

您目前有1和3，这确实令人困惑。如果删除了application元素，它仍然可以正常工作。听起来好像要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为此提供的现有编辑字段，例如： This text editor example

请告诉我是否有某些原因导致您不希望使用上述小部件。

您可以不使用3和普通的窗口小部件，但是最好执行Google云端硬盘的功能，并允许用户在页面加载时进入编辑模式，或者按转义之类的键进入tabindex应用程序区域（虽然可以在应用程序元素中，但是也可以）。

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

Answer 2

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

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

辅助功能角色应用

2 个答案: