最简单的问题示例:https://codepen.io/sidouglas/pen/LYPZaOG
当输入范围得到关注时,使用Chrome Vox或Mac的Voice over,会连续读出每个
与非常易于访问的https://plyr.io/#audio组件相比,它在聚焦时会持续更新其aria值,但只会向屏幕阅读器通报两次。有人知道plyr是如何做到的吗?
valuetext
的值。<input
...
v-bind:aria-valuemax="valueMax"
v-bind:aria-valuenow="valueNow"
v-bind:aria-valuetext="currentTime + ' of ' + totalDuration"
...
/>
与非常易于访问的https://plyr.io/#audio组件相比,它在聚焦时会持续更新其aria值,但只会向屏幕阅读器通报两次。有人知道plyr是如何做到的吗?
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>