HTML5的required属性仅校验不提供视觉提示，需用CSS :required::after加星号、aria-required="true"提升可访问性，并避免依赖placeholder或纯颜色标识。
HTML5 中 required 属性本身不显示星号或视觉标识
浏览器原生的 required 属性只负责表单提交校验，不会自动在标签旁加 * 或变色。想“突出”必填项，必须手动添加视觉提示，否则用户无法直观识别。
常见错误是只写 就以为完成了，结果测试时发现用户常漏填、反复提交失败。
- 所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持
required，但渲染行为一致：无视觉反馈 -
required对、、（除type="hidden"等少数类型外）均有效 - 若用 JavaScript 动态设置
element.required = true，同样不会触发视觉变化
用 CSS 伪类 :required 配合 ::after 添加星号
这是最轻量、无需 JS、语义清晰的做法。关键点在于：星号必须加在 内，且与文字保持可访问性（不能仅靠颜色区分）。
label:required::after {
content: " *";
color: #d32f2f;
font-weight: bold;
}
- 必须用空格开头（
" *"），避免星号紧贴文字造成阅读困难 - 不要用
color单独表示必填——色盲用户可能无法识别，需配合位置、形状或文字（如 “（必填）”） - 若 label 是
for关联方式，确保label元素本身有required属性（或通过 JS 同步），否则:required不匹配 - 部分旧版 Safari 对
label:required支持不稳定，建议同时给 input 加 class 如required-field作降级
结合 aria-required="true" 提升屏幕阅读器兼容性
仅靠视觉星号对视障用户无效。aria-required="true" 是明确告诉辅助技术“此项不可跳过”的标准方式。
<label for="name">姓名</label> <input id="name" name="name" required aria-required="true">
-
aria-required在required存在时是冗余的，但某些老旧读屏软件（如 JAWS 早期版本）可能忽略原生属性，显式声明更稳妥 - 不要对非必填项写
aria-required="false"—— 这反而会干扰正常逻辑 - 如果使用自定义组件（如封装的 Vue/React 输入框），必须手动透传
aria-required，不能只依赖内部required
避免用 placeholder 暗示必填
把 placeholder="姓名（必填）" 当作视觉提示是典型误区。placeholder 文字在输入后消失，无法持续传达规则，且不被所有屏幕阅读器朗读。
- WCAG 明确不推荐用 placeholder 替代标签或必填标识
- placeholder 对低视力用户对比度不足，移动端缩放后易被截断
- 若坚持加说明，应放在
label内或辅助文本中，例如：
必填标识的核心不是“加个星号”，而是确保所有用户（包括键盘操作者、放大镜使用者、读屏用户）在任意时刻都能明确感知字段约束。CSS 星号 + aria-required + 语义化 label 结构，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
