b-spinner 的 VUE-js 辅助功能——使用每 3 秒重复一次的 Aria 进行数据加载的音频通知

Question

我正在尝试在微调器直观地显示数据正在加载时为“数据加载”的音频通知添加可访问性。显然，我正在寻找一个声音通知，最好是一个无需点击任何东西就能自动播放的通知。我的目标是自动听到通知并在加载时每 3 秒重复一次。

下面的代码确实会自动生成工作公告。但是，每 3 秒重复一次（或 10 秒或其他任何时间）的目标未已实现。

早期阶段：对于搜索此内容的人，我发现将 tabindex = "0" 放入代码中至少允许继续播放一些音频（这在当时是进步），但必须ab 转到元素 以收听通知。这可以被视为不受欢迎的。另外，有人推荐not使用tabindex = 0思路，请看我的后续问题：

该元素是 b-spinner，示例标记代码为：

 <b-spinner id = "myspinny" small variant="primary"
               show.bind="isLoading"
               role="alert"
               aria-busy = true;
               aria-live="assertive"
               aria-atomic="true"
               aria-label = "Data is loading.  Please wait for the load to finish."
               label="Searching, please wait for the specific data load" @click="myspinny"
               alt="Processing... please wait for the specific data load"
               title= "Data Loading"
               v-if="resultsBusy">
  </b-spinner>

以上标记语法编译通过，微调器仍然运行，并且在 NVDA 中有一个真实的音频公告（大概类似 JAWS 的工具会产生相同的结果）。但是，最终目标是让它每 3 秒重复一次。

另外，上面的标记可能有一些元素不是 used/needed。

我希望至少获得一次音频通知（现已实现），但最终目标是每 3 秒发出一次通知，并在页面加载时停止（很像微调器）。

注意：我看到了一个可访问性相关的网页：https://bootstrap-vue.org/docs/components/spinner 为此建议使用嵌套元素，但我没有看到真正的语法示例。此外，关于堆栈溢出的其他类似问题不处理 b-spinner 元素本身，而是一个元素。

有一个detailed design for this here。不幸的是，截至此编辑 [11/15/2021]，我个人无法从 link 获得解决方案以在我的 vue 设置（即 vue 版本 2）中工作。

Answer 1

我理解尝试各种 ARIA 属性和角色的必要性，但有时这会使事情变得复杂。使用 ARIA 时，最好将其保持在最低限度。例如，您有 role="alert" 和 aria-live="assertive"。 alert role 为您提供隐含的自信活动区域。

断言区域可能清除其他屏幕reader公告。来自 spec:

User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs.

因此，您每 3 秒发布一条消息可能会破坏其他公告。也许不太可能，但理论上是可能的。

我的一般经验法则是使用 aria-live="polite" 除非你的公告非常重要以至于用户需要放下他们正在做的一切并倾听它。

使用纯html而不是vue.js，下面每3秒播一次

<div aria-live="polite" id="mymessage"></div>
<button onclick="myclick()">start annoying message</button>
<script>
  function myclick() {
    setInterval(myTimer, 3000);

    function myTimer() {
      document.getElementById("mymessage").innerHTML = 'still loading';
    }
  }
</script>

如何将其转换为 vue.js 代码，我不确定，抱歉。但它为您提供了目标应该是什么的模板。

显然，您会想在完成后关闭计时器。

b-spinner 的 VUE-js 辅助功能——使用每 3 秒重复一次的 Aria 进行数据加载的音频通知

VUE-js Accessibility for b-spinner -- audio announcement of data loading using Aria that REPEATS every 3 seconds

javascript

accessibility

wai-aria

vue.js

bootstrap-vue