如何使用 Vue JS 在动态分配的 aria 标签周围添加文本

Question

我对 vue.js 和辅助功能还很陌生，

我正在尝试让一个元素在屏幕上显示为 reader（“这是”+ person.name）。

我能够通过 :aria-label="person.name" 宣布 person.name，但我无法围绕此添加文本。

如何在动态分配的 :aria-label 周围添加文本？

Answer 1

你尝试过 :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>

如何使用 Vue JS 在动态分配的 aria 标签周围添加文本

How to add text around dynamically assigned aria labels with Vue JS

html

javascript

accessibility

vue.js

vuejs2