b-spinner 的 VUE-js 可访问性——使用 Aria 进行数据加载的音频公告，每 3 秒重复一次

当微调器直观地显示数据正在加载时，我试图添加“数据加载”音频公告的可访问性。 显然，我正在寻找一种声音公告，最好是一种无需单击任何内容即可自动播放的公告。我的目标是自动听到公告并在加载时每 3 秒重复一次。

下面的代码会自动生成一个工作公告。 然而，拥有它的目标每 3 秒重复一次（或 10 秒或其他）有NOT已实现。

早期阶段：对于搜索此内容的人，我发现放置一个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 秒重复一次。

此外，上述标记可能有一些未使用/不需要的元素。

我希望至少获得一次音频公告（现已实现），但最终目标是每 3 秒发布一次公告，该公告将在页面加载时停止（很像旋转器）。

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

有一个详细设计请看这里 https://pretagteam.com/question/vuejs-accessibility-for-bspinner-audio-announcement-of-data-loading-using-aria-that-repeats-every-3-seconds。不幸的是，截至此编辑 [11/15/2021]，我个人无法从该链接获取解决方案以在我的 vue 设置（即 vue 版本 2）中工作。

我理解尝试各种 ARIA 属性和角色的必要性，但有时这会让事情变得复杂。使用 ARIA 时，最好保持最小化。例如，你有role="alert" and aria-live="assertive". The 警戒角色 https://www.w3.org/TR/wai-aria/#alert给你一个隐含的、自信的生活区域。

自信区域might清除其他屏幕阅读器公告。来自spec https://www.w3.org/TR/wai-aria/#aria-live:

用户代理或辅助技术MAY选择在发生断言更改时清除排队的更改。

因此，您每 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 代码，我不确定，抱歉。但它为您提供了目标应该是什么的模板。

显然，当你完成后，你会想杀死计时器。