My goal is to make a vue component that dynamically announces information to a screen reader when certain events occur on my website.
I have managed to achieve this functionality by having a button populate a span with text containing the attributes aria-live="assertive" and role="alert". This works well initially, but when I click on other buttons with similar behavior, NVDA reads the previous text twice before reading the new text. This issue seems to be specific to vue, as a similar setup using jquery does not have the same problem. I suspect that it has something to do with how vue renders to the DOM.
I am hoping to find a workaround for this issue or discover a better way to present the text to users without encountering this problem. Any assistance would be greatly appreciated.
I have created a simple component in a working code sandbox to demonstrate the issue I am facing (navigate to components/HelloWorld.vue for the code) -- Please note: The content of this sandbox may have changed based on the answer provided below. Below is the full code for the component:
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>