具有输入范围的HTML音频辅助功能

Question

最小的问题示例：https：//codepen.io/sidouglas/pen/LYPZaOG

当输入范围集中在Chrome Vox或Mac的Voice over上时-的每个值valuetext都会连续读出。

<input
 ...
  v-bind:aria-valuemax="valueMax"
  v-bind:aria-valuenow="valueNow"
  v-bind:aria-valuetext="currentTime + ' of ' + totalDuration"
  ...
/>

将此与非常易于访问的https://plyr.io/#audio组件进行对比-当重点关注时，它会继续更新其aria值，但只向屏幕阅读器宣布两次。

有人知道吗？

<input
 ...
  v-bind:aria-valuemax="valueMax"
  v-bind:aria-valuenow="valueNow"
  v-bind:aria-valuetext="currentTime + ' of ' + totalDuration"
  ...
/>

new Vue({
  el: '#range',
  data: {
    valueMax:100,
    duration:100,
    current:0,
    totalDuration:'1:40'
  },
  computed:{
    currentTime: function() {
      return this.convertTime(this.current);
    },
     valueNow() {
      return Math.round(this.current);
    },
  },
  methods: {
    convertTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = time - (minutes * 60);
      return `${minutes}:${seconds.toFixed(0).toString().padStart(2, '0')}`;
    },
  },
  mounted: function(){
   var self = this;
   setInterval(function(){
     self.current = Number(self.current) + 1;
     if(self.current >= self.valueMax){
        self.current = 0;
     }
    },2000);
  },
});

.audio-file-player__slider-range{
  border:1px solid red;
  width:100%;
}

.audio-file-player__slider-range:focus {
  box-shadow: 0 0 10px blue;
}

Answer 1

对于遇到此问题的任何人来说，简单的解决方案是使用 覆盖该值aria-valuetext。

当项目正在播放时，当它第一次收到焦点aria-valuetext时，我会将其设置为“当前：currentTime，剩余： ” 。remainingTime

然后，在项目播放时不要更新时间（不理会aria-valuetext）。

然后，当播放暂停/停止时，aria-valuetext再次更改以反映当前时间。

最后，当有人使用箭头键进行搜索时，我会将当前时间更新为 200 毫秒。

您可以决定是在玩游戏时执行此操作还是仅在不玩游戏时执行此操作，因为我不确定就信息与中断而言哪个是最佳解决方案。

我倾向于在玩游戏时不更新，因为如果您将其设置为可聚焦的，则用户始终可以切换到当前时间。

通过这样做，您可以确保它不会干扰播放音乐或宣布 200 个不同的时间。

plyr.io 理论- 一开始它也对我重复，然后我改变了宣布速度的设置。我相信有些人收到通知而有些人没有收到通知的原因是他们更新当前时间的速度（看起来每秒 3-4 次），而且我认为更新速度如此之快，以至于屏幕阅读器决定不混淆拥有它的用户。这只是一个理论，但我最好的猜测，因为他们没有做任何我能看到的聪明的事情。