具有输入范围的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值，但只向屏幕阅读器宣告两次。 

有人知道它怎么做吗？

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="range">
  <input
         aria-label="Seek"
         aria-valuemin="0"
         autocomplete="off"
         class="audio-file-player__slider-range u-color-gray-111111 u-width-100"
         min="0"
         role="slider"
         step="1"
         type="range"
         v-bind:aria-valuemax="valueMax"
         v-bind:aria-valuenow="valueNow"
         v-bind:aria-valuetext="currentTime + ' of ' + totalDuration"
         v-bind:max="duration"
         v-model="current"
         />
  <p>current: {{ current }}</p>
  <p>aria-valuenow: {{ valueNow }}</p>
  <p>aria-valuetext: {{ currentTime + ' of ' + totalDuration }}</p>
</div>

最小问题示例：https://codepen.io/sidouglas/pen/LYPZaOG当输入范围为焦点时，使用Chrome Vox或Mac的Voice over-连续读取valuetext的每个值。 <...>

Answer 1

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