第 22 课2026.09.30
让辅助技术读取空白提交产生的错误说明。
第 22 课：把标题错误关联到输入框
- 日期：2026-09-30
- 课程序号：第 22 课
- 知识点：
aria-describedby
用途或适用场景
让辅助技术读取空白提交产生的错误说明。
核心概念
错误出现时让输入框引用错误元素 ID；没有错误时不保留关联。
最小代码或操作示例
jsx
<input value={draft} onChange={e => setDraft(e.target.value)}
aria-invalid={Boolean(error)}
aria-describedby={error ? `${item.id}-error` : undefined} />
{error && <p id={`${item.id}-error`}>{error}</p>}3～5 分钟练习
空白提交后检查输入框的两个 ARIA 属性。
参考答案
aria-invalid 为真，aria-describedby 指向当前课程的错误段落。
与上一课的联系
第 21 课显示了空白提交反馈；本课只建立输入框与反馈的关联；下一课可在重新输入时清除错误。
时效校验
时效校验：2026-09-30（React 19.3；React DOM 表单控件支持标准 ARIA 属性，未见废弃标记。）