Vuetify v-text-field：屏幕阅读器重复播报错误提示问题

在使用Vuetify的v-text-field带验证规则时，Tab切换字段会出现NVDA等屏幕阅读器重复播报同一条错误信息的问题，核心原因是Vuetify默认的错误提示DOM元素与输入框的ARIA关联逻辑重复，导致屏幕阅读器多次识别到错误信息。以下是具体修复步骤：

修复思路 #

• 手动指定错误提示的唯一ID，通过aria-describedby精准关联输入框和错误信息，避免自动生成的重复关联
• 改用error-messages属性手动管理错误提示，替代规则自动生成，增强对ARIA属性的控制
• 用计算属性实时计算错误状态，减少重复验证触发的冗余提示

修改后的代码示例 #

模板部分 #

<v-col cols="12" md="4" class="py-0">
  <v-text-field 
    class="aeroplanNumber_unmasking" 
    :label="t('aeroplanNumber') + '*'"
    :aria-label="t('aeroplanNumber')"
    v-model="aeroplanNumber" 
    variant="underlined" 
    @keypress="onlyNumeric"
    maxlength="9"
    :error="!!aeroplanNumberError"
    :error-messages="[aeroplanNumberError]"
    :aria-describedby="`aeroplan-error`"
  >
  </v-text-field>
  <span id="aeroplan-error" class="v-messages__message" role="alert" v-if="aeroplanNumberError">{{ aeroplanNumberError }}</span>
</v-col>
<v-col cols="12" md="4" class="py-0">
  <v-text-field 
    class="lastName_unmasking" 
    :label="t('surName') + '*'" 
    :aria-label="t('surName')"
    v-model="surName"
    validate-on="blur"
    variant="underlined" 
    maxlength="15"
    :error="!!surNameError"
    :error-messages="[surNameError]"
    :aria-describedby="`lastname-error`"
  >
  </v-text-field>
  <span id="lastname-error" class="v-messages__message" role="alert" v-if="surNameError">{{ surNameError }}</span>
</v-col>

脚本部分 #

<script setup>
import { ref, computed } from 'vue';

const aeroplanNumber = ref('');
const surName = ref('');

// 实时计算航空卡号错误信息
const aeroplanNumberError = computed(() => {
  if (!aeroplanNumber.value) return t('loyaltyAeroplanRequired');
  if (aeroplanNumber.value.length < 9) return t('aeroplanNumberLessError');
  if (aeroplanNumber.value.length > 9) return t('aeroplanNumberGreaterError');
  return '';
});

// 实时计算姓氏错误信息
const surNameError = computed(() => {
  if (!surName.value) return t('surNameRequired');
  if (surName.value.length < 3) return t('surNameError');
  return '';
});

// 数字输入限制逻辑
const onlyNumeric = (e) => {
  const charCode = e.charCode || e.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    e.preventDefault();
  }
};
</script>

关键说明 #

1. 唯一错误ID关联：给每个错误提示元素设置唯一ID，通过aria-describedby绑定到对应输入框，确保屏幕阅读器仅读取一次错误信息
2. 计算属性管理错误：用computed属性替代原有的rules数组，实时计算当前字段的错误状态，避免规则多次触发导致的重复提示
3. 显式控制错误DOM：通过:error和:error-messages显式控制错误状态与文本，替代Vuetify自动生成的错误DOM结构，减少ARIA属性的自动重复绑定

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