我正在尝试获取一个vue组件,以便在我的网站上发生不同事件时动态地向屏幕阅读器发布信息。
我有点工作,点击按钮会填充带有文字的aria-live="assertive"
和role="alert"
范围。这在第一次正常工作,但是,单击具有类似行为的其他按钮会导致NVDA在读取新文本之前两次读取前一个文本。这似乎是在vue中发生的,但是没有使用jquery进行类似的设置,所以我猜测它与vue呈现给DOM的方式有关。
我希望有一些方法可以解决这个问题,或者更好的方法来向用户阅读不会出现此问题的文本。非常感谢任何帮助。
Here is a simple component我在一个工作代码沙箱中设置以显示我遇到的问题(导航到代码的组件/ HelloWorld.vue) - 注意:根据下面的答案,此沙箱已更改即可。该组件的完整代码如下:
export default {
name: "HelloWorld",
data() {
return {
ariaText: ""
};
},
methods: {
button1() {
this.ariaText = "This is a bunch of cool text to read to screen readers.";
},
button2() {
this.ariaText = "This is more cool text to read to screen readers.";
},
button3() {
this.ariaText = "This text is not cool.";
}
}
};

<template>
<div>
<button @click="button1">1</button>
<button @click="button2">2</button>
<button @click="button3">3</button><br/>
<span role="alert" aria-live="assertive">{{ariaText}}</span>
</div>
</template>
&#13;
答案 0 :(得分:1)
好的,我发现的工作方式更加一致,不是用新文本替换元素中的文本,而是使用要读取的新文本向父容器添加新元素。我将它存储在一个字符串数组中,而不是将文本存储为单个字符串,这些字符串将v-for
存储在aria-live
容器中的页面上。
我已经构建了一个完整的组件,可以通过各种方式执行此操作,作为任何希望执行此操作的人的示例:
export default {
props: {
value: String,
ariaLive: {
type: String,
default: "assertive",
validator: value => {
return ['assertive', 'polite', 'off'].indexOf(value) !== -1;
}
}
},
data() {
return {
textToRead: []
}
},
methods: {
say(text) {
if(text) {
this.textToRead.push(text);
}
}
},
mounted() {
this.say(this.value);
},
watch: {
value(val) {
this.say(val);
}
}
}
&#13;
.assistive-text {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
&#13;
<template>
<div class="assistive-text" :aria-live="ariaLive" aria-relevant="additions">
<slot></slot>
<div v-for="(text, index) in textToRead" :key="index">{{text}}</div>
</div>
</template>
&#13;
这可以通过将父变量设置为组件的v-model
来使用,并且对该变量的任何更改都将被读取到屏幕阅读器一次(以及父容器变为制表符的任何时候) -focused)。
它也可以由this.$refs.component.say(textToSay);
触发 - 请注意,如果父容器变为以标签为中心,也会再次触发此操作。将元素放在不会获得焦点的容器中可以避免这种行为。
它还包含一个插槽,因此可以像这样添加文本:<assistive-text>Text to speak</assistive-text>
但是,它不应该是动态/胡须变量,否则当文本发生变化时,您将在原始问题中遇到问题。
我还使用此组件的工作示例更新了the sandbox posted in the question。