Bootstrap Vue.js：为<b-nav-item>设置title属性的最佳实践

针对Bootstrap Vue的<b-nav-item>组件，结合WCAG H33技术要求，以下是设置title属性的具体最佳实践：

• title值与可见文本严格同步
  对于有明确可见文本的导航项，title属性的内容必须和内部显示的文本完全一致。比如你的第一个<b-nav-item>，title="Global"和<span>Global</span>匹配，这能保证屏幕阅读器用户获取的信息和视觉用户完全统一，是最基础的无障碍要求。

• 动态文本的title绑定处理
  遇到像第二个导航项这种使用动态数据（比如{{this.$store.module_names.CAR}}s）的情况，绝对不能写死title，要通过Vue的动态绑定语法让title跟着文本同步变化，修正后的代码如下：

  <b-nav>
    <b-nav-item :to="{ name: 'global', query: this.$route.query }" exact-active-class="active" exact
      title="Global">
      <span>Global</span>
    </b-nav-item>
    <b-nav-item
      :to="{ name: 'stats-index-cars', query: this.$route.query }"
      v-if="$can('viewGroupedByCar', 'reports')"
      exact-active-class="active"
      exact
      :title="`${this.$store.module_names.CAR}s`"
    >
      <span>{{this.$store.module_names.CAR}}s</span>
    </b-nav-item>
  </b-nav>
  

  这样不管$store.module_names.CAR的值如何变化，title和可见文本始终保持一致，避免出现信息脱节的问题。

• 拒绝冗余描述
  不要在title里加"点击进入"、"导航到"这类冗余内容，title的核心作用是匹配或补充可见文本，保持简洁准确就好。

• 无文本导航项的特殊处理（可选）
  如果你的导航项只有图标没有文字，title需要完整描述该导航的功能（比如title="查看车辆统计数据"），但你的示例都是带文本的项，优先遵循前几条规则即可。

内容的提问来源于stack exchange，提问作者monny