I am very new to vue.js and accessibility,
I am trying to make an element be announced by the screen reader as ("This is " + person.name).
I was able to announce the person.name with :aria-label="person.name" but I am not able to add text around this.
How do I add text around the dynamically assigned :aria-label?
Did you try with :aria-label="'This is ' + person.name"
new Vue({
el: "#demo",
data() {
return {
person: { name: "Logan" }
}
},
mounted() {
console.log(this.$refs.btn)
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button ref="btn" :aria-label="'This is ' + person.name">name</button>
</div>