必须显式绑定label与input，使用for/id配对或隐式包裹；fieldset+legend分组控件；错误提示用aria-invalid与aria-describedby关联；必填项设aria-required和required；确保键盘可访问性。

label 必须显式绑定 input，不能只靠视觉对齐

屏幕阅读器不会读取“看起来像标签”的文字，只认 label 与 input 的真实关联。常见错误是用 CSS 把文字放在输入框旁边，却不加任何语义连接——用户聚焦到 input 时，听到的可能是“编辑文本”而不是“邮箱地址”。

两种可靠方式：

• 用 for 和 id 显式配对：邮箱
• 用隐式包裹（更简洁）：邮箱，无需维护 ID，且天然支持表单验证逻辑

禁用 aria-label 替代 label：它绕过浏览器原生验证、不触发 :valid/:invalid 伪类，且部分老旧辅助技术无法稳定读取。

fieldset + legend 是分组控件的唯一可靠方案

单选按钮或复选框组如果没有 fieldset 和 legend，屏幕阅读器会把每个选项当成孤立控件，用户完全不知道它们属于同一逻辑组（比如“付款方式”或“订阅偏好”）。

正确结构示例：

您希望接收哪些通知？

邮件提醒 短信提醒

注意：legend 必须是 fieldset 的第一个子元素；不要用 div + aria-label 模拟，那无法被所有屏幕阅读器识别为分组标题。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

错误提示必须用 aria-invalid + aria-describedby 关联

仅靠视觉红框或弹窗提示，对键盘或屏幕阅读器用户无效。验证失败时，要同步操作三件事：

• 给 input 设置 aria-invalid="true"
• 让错误消息有唯一 id（如 error-username）
• 在 input 上添加 aria-describedby="error-username"

这样屏幕阅读器会在用户聚焦该字段时，自动朗读错误说明。别把错误消息塞进 placeholder——它会在用户输入时消失，且不被所有辅助技术读取。

必填项要用 aria-required，别只靠星号

视觉上的 * 号对屏幕阅读器不可见。必须显式声明 aria-required="true"，配合 required 属性（两者都设更稳妥）。但注意：aria-required 不触发浏览器原生验证，只是辅助技术提示；required 才真正阻止提交。

如果表单含动态字段（如条件显示），需用 JS 同步更新 aria-required 值，并确保焦点能落到首个错误字段——否则用户可能反复 Tab 却卡在不可见的必填项上。

最易被忽略的是键盘流完整性：所有交互控件（包括自定义下拉、开关）必须可 Tab 进入、用空格/回车触发，且焦点轮廓不能被 CSS 全局清除（outline: none 是大忌）。可访问性不是加几个 ARIA 就完事，而是整条键盘路径和语音反馈链都得跑通。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！