Я пытаюсь заставить компонент vue динамически сообщать информацию программе чтения с экрана, когда на моем сайте происходят различные события.
У меня это работает, когда нажатие кнопки заполняет диапазон aria-live="assertive"
и role="alert"
текстом. Это работает прилично в первый раз, однако нажатие других кнопок с аналогичным поведением заставляет NVDA читать предыдущий текст дважды, прежде чем читать новый текст. Кажется, это происходит в vue, но не с аналогичной настройкой с использованием jquery, поэтому я предполагаю, что это как-то связано с тем, как vue отображает DOM.
Я надеюсь, что есть какой-то способ обойти эту проблему или, возможно, лучший способ прочитать текст пользователю, у которого не было бы этой проблемы. Любая помощь приветствуется.
Вот простой компонент, который я установил в песочнице рабочего кода, чтобы показать проблему, с которой я столкнулся (навигация в 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>