17370845950

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" 是明确告诉辅助技术“此项不可跳过”的标准方式。

姓名

• aria-required 在 required 存在时是冗余的，但某些老旧读屏软件（如 JAWS 早期版本）可能忽略原生属性，显式声明更稳妥
• 不要对非必填项写 aria-required="false" —— 这反而会干扰正常逻辑
• 如果使用自定义组件（如封装的 Vue/React 输入框），必须手动透传 aria-required，不能只依赖内部 required

避免用 placeholder 暗示必填

把 placeho

lder="姓名（必填）" 当作视觉提示是典型误区。placeholder 文字在输入后消失，无法持续传达规则，且不被所有屏幕阅读器朗读。

• WCAG 明确不推荐用 placeholder 替代标签或必填标识
• placeholder 对低视力用户对比度不足，移动端缩放后易被截断
• 若坚持加说明，应放在 label 内或 辅助文本中，例如：邮箱 （必填）

必填标识的核心不是“加个星号”，而是确保所有用户（包括键盘操作者、放大镜使用者、读屏用户）在任意时刻都能明确感知字段约束。CSS 星号 + aria-required + 语义化 label 结构，三者缺一不可。