如何使用按钮可访问地将applet注入页面？

Question

在HTML页面中，我有一个<button>。点击它，javascript将applet注入页面上其他地方的<div>。再次单击它会隐藏div。更多点击切换它。 （如果重要，那就是GeoGebra applet。）

我有一些关于如何做这种事情的问题。我希望这里的一些无障碍专家可能有答案。

1. 我的按钮有一个标题“显示计算器”，按下时会切换到“隐藏计算器”。是否还有与按钮属性有关的内容？
2. 将applet注入<div>是否正确，而不是像HTML <object>？
3. 按下按钮时，可以将焦点保持在按钮上还是应该移动到小程序？如果焦点停留在按钮上，我是否需要为屏幕阅读器用户提供一些简单的方法来跳转到applet？如果是这样，如何以这种方式与用户沟通？我应该提供一种简单的方法来从小程序到按钮的焦点吗？
4. 对于这种事情，<div>上应该有咏叹调属性吗？是否有适当的咏叹调角色？是否适合这种情况使用aria live region宣布显示/隐藏div？

Answer 1

为了获得最佳的可访问性体验，您应该遵循disclosure widget pattern。

回答你的具体问题。

1. 披露模式讨论了应在按钮上设置的ARIA属性。
2. 对不起，这与无障碍无关，所以我无法回答。
3. 通常，选择按钮后不应移动焦点。如果这样做，它可能会违反WCAG 3.2.2 On Input，“除非在使用组件之前已经告知用户该行为”。 至于让用户知道如何访问applet，如果你按照公开小部件模式，当你改变aria-expanded的值时，他们会听到“展开”或“折叠”，这样用户就会知道接下来会发生什么。您的applet是否紧跟DOM中的按钮？那将是最好的解决方案。如果按钮和新注入的applet之间存在元素，则可能会造成混淆。
4. aria-live可以非常方便，但在这种情况下，如果遵循＃3则不应该是必要的。