第 16 课：关联输入框与错误提示

日期：2026-09-21
课程序号：第 16 课
知识点：用 ARIA 属性关联输入框与错误提示

用途或适用场景

让辅助技术知道时长输入是否无效，以及对应提示位于哪里。

核心概念

沿用 valid；用户首次离开字段后才用 aria-invalid 标记已验证出的错误，并用 aria-describedby 指向错误提示的 id。

最小代码或操作示例

text

const touched = ref(false)
<input v-model.number="minutes" type="number" min="1" max="60"
  @blur="touched = true" :aria-invalid="touched && !valid"
  :aria-describedby="touched && !valid ? 'minutes-error' : undefined">
<p v-if="touched && !valid" id="minutes-error">请输入 1 到 60 分钟</p>

3～5 分钟练习

输入 0，检查输入框的两个 ARIA 属性和提示元素的 id。

参考答案

离开输入框后，aria-invalid 为 true，aria-describedby 与提示的 id="minutes-error" 一致；在用户首次验证前不标记错误。

与上一课的联系

沿用第 15 课提交前使用的 minutes、valid 和已有错误提示；本课只新增输入框与提示之间的 ARIA 关联；完成练习后下一课可让无效提交立即显示这条提示。

时效校验

时效校验：2026-09-23（保留原日期与课号；Vue 3 当前属性绑定指南与 W3C WAI ARIA21 技术页；修正为首次验证后才设置 aria-invalid=true，未见废弃说明）。