如何修复页面无障碍错误「按钮必须有可识别文本」（Vue日期选择器）

axe检测到的「确保按钮有可识别文本」错误，是因为b-form-datepicker内部的切换按钮或导航按钮未被正确标注——直接给组件根元素加aria-label不会传递到内部按钮，需要用组件提供的专属props来设置：

1. 给日期选择器切换按钮添加标签 #

针对打开/关闭日历弹窗的切换按钮，使用toggle-button-attrs prop传递aria-label：

<b-form-datepicker
  id="example-i18n-picker"
  v-model="value"
  v-bind="labels[locale] || {}"
  :locale="locale"
  :start-weekday="weekday"
  :show-decade-nav="showDecadeNav"
  :hide-header="hideHeader"
  class="mb-2"
  :toggle-button-attrs="{ 'aria-label': '打开日历选择器' }"
></b-form-datepicker>

2. 给内部导航按钮添加标签 #

如果axe检测的是日历内部的月份/十年导航按钮，使用对应的props分别设置：

<b-form-datepicker
  id="example-i18n-picker"
  v-model="value"
  v-bind="labels[locale] || {}"
  :locale="locale"
  :start-weekday="weekday"
  :show-decade-nav="showDecadeNav"
  :hide-header="hideHeader"
  class="mb-2"
  :prev-button-attrs="{ 'aria-label': '切换到上一月' }"
  :next-button-attrs="{ 'aria-label': '切换到下一月' }"
  :decade-prev-button-attrs="{ 'aria-label': '切换到上一个十年' }"
  :decade-next-button-attrs="{ 'aria-label': '切换到下一个十年' }"
></b-form-datepicker>

3. 配合输入框标签增强无障碍性 #

同时给组件关联<label>，让屏幕阅读器识别输入框用途：

<label for="example-i18n-picker">选择日期</label>
<b-form-datepicker
  id="example-i18n-picker"
  ...其他属性
></b-form-datepicker>

以上设置完成后，重新用axe扫描即可消除按钮无识别文本的无障碍错误。

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