必填字段需手动添加视觉红星并确保无障碍支持：在label内用纯文本*字符配合CSS样式，同时input标签显式声明required和aria-required="true"，避免伪元素、字体图标或背景图等不可靠方案。
必填字段的 required 属性本身不显示红星
浏览器原生的 required 属性只控制表单提交校验，不会在界面上添加任何视觉标记（比如 ★ 或 *）。想让用户一眼看出哪些是必填项，必须靠 CSS 或 HTML 手动标注。
用 * 字符 + CSS 控制颜色和位置最稳妥
直接在 <label> 里加星号字符（* 是 HTML 实体，避免被误解析为格式符号），再用 CSS 控制样式。这是兼容性最好、语义最清晰的做法：
<label for="name">姓名<span class="required">*</span></label> <input type="text" id="name" name="name" required>
CSS 建议这样写：
.required {
color: #e53935; /* 红色，比纯 red 更柔和 */
margin-left: 4px;
font-weight: bold;
}- 不用
*而用*，避免某些编辑器或 CMS 自动转义 - 不要把星号塞进
for属性或id里，会破坏可访问性（屏幕阅读器读不出） - 避免用伪元素
::after插入星号——它对屏幕阅读器不可见，不符合 WCAG 2.1
用 aria-required="true" 辅助无障碍支持
光有视觉红星不够，视障用户依赖辅助技术识别必填项。在 <input> 上显式声明 aria-required="true"，能确保多数屏幕阅读器播报“必填”：
立即学习“前端免费学习笔记（深入）”；
<input type="email" id="email" name="email" required aria-required="true">
-
required属性已隐含aria-required="true"，但显式写出更保险（尤其旧版 JAWS 或某些国产读屏） - 不要只靠
aria-required而省略required——它不触发原生校验 - 如果字段逻辑上必填但无法用
required（比如动态表单），才单独依赖aria-required
避免用背景图或字体图标实现红星
看似灵活，实则容易出问题：
- 背景图
background-image在高对比度模式下可能消失 - 字体图标（如 Font Awesome 的
<i class="fa fa-asterisk"></i>）需要额外加载、可能 FOUC（闪动）、且默认无语义 - 用
content: "*"伪元素添加星号，无法被复制、打印时可能丢失、也不被所有读屏识别
纯文本 * + CSS 样式，是最小依赖、最高兼容、最易维护的选择。
真正难的不是加个红星，而是让这个红星在暗色模式、缩放 200%、开启高对比度、用键盘导航时都依然可感知、可理解、不误导。
