面试题：Vue中如何为组件添加基本的无障碍属性

Question

在Vue组件开发中，为了实现无障碍设计，需要添加一些基本的无障碍属性。请描述如何在Vue组件内为一个按钮元素添加合适的无障碍属性，比如使其可通过键盘操作、有明确的文本标签等，并写出相关代码示例。

Answer 1

1. 使其可通过键盘操作：
   • 在HTML中，大多数按钮元素（如<button>标签）默认就可以通过键盘操作（例如按Tab键可以聚焦，按Enter键可以触发点击）。在Vue组件中也是如此，无需额外添加特殊属性来实现基本的键盘可操作性。
2. 添加明确的文本标签：
   • 可以使用aria - label属性为按钮添加文本标签，当按钮没有可见文本时，这对于屏幕阅读器等辅助技术非常重要。
   • 代码示例如下：

<template>
  <div>
    <button v - on:click="handleClick" aria - label="删除用户">
      <!-- 如果按钮有可见文本，这里写可见文本，如：删除用户 -->
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 按钮点击的逻辑
      console.log('用户被删除');
    }
  }
};
</script>

• 如果按钮有可见文本，也可以使用<label>标签包裹按钮，关联按钮的id属性，这样也能增强无障碍性：

<template>
  <div>
    <label for="deleteUserButton">删除用户</label>
    <button id="deleteUserButton" v - on:click="handleClick">删除用户</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 按钮点击的逻辑
      console.log('用户被删除');
    }
  }
};
</script>