我结合UI指南资料，整理了海外界面UI（表单）中关于“必填”标记的相关内容。
📌 主要必填标记及最佳实践
使用星号 (*)
- 一般最为普及，在必填字段上添加“*”。
- 但是，必须在表单开头添加“ 为必填项”等说明* (Nielsen Norman Group, 加州州立大学北岭分校)。
- 也有使用颜色进行强调的例子（如红色文字）。
在标签上明确标示 “Required” 或 “(required)”
- 通过在标签内添加“Required”文字，可以向屏幕阅读器明确提示，从而提高无障碍访问能力 (Deque)。
结合使用 ARIA 属性和 HTML5 的
required属性- 除了视觉上的显示，还可以使用
aria-required="true"或<input required>，在程序层面上告知其为必填项 (Deque)。
- 除了视觉上的显示，还可以使用
使用 “(optional)” 明示选填字段
- 也有不标必填字段，而是将选填字段明示为“(optional)”的方法，在两者混合出现时比较有效。
- 不过，Nielsen‑Norman指出，“同时标明必填项更容易判断” (TPGi)。
✅ UI指南资料汇总
| 来源 | 内容 |
|---|---|
| NN/g: Marking Required Fields in Forms | 推荐使用星号＋说明文的组合，认为仅标示选填项不够友好 (Nielsen Norman Group)。 |
| Deque (Anatomy of Accessible Forms) | ・在标签内并用“Required”字符串或图片。 ・明确指出仅靠颜色提示是不够的。 |
| W3C Techniques (H90) | 有在标签中包含星号或“(required)”，并在表单开头定义其含义的例子。 |
| TPGi (Doing what’s required) | 考虑到无障碍访问，认为星号＋ARIA属性＋插入标签文字是最佳选择。 |
| Contensis 表单UX指南 | 简明扼要地指出，一致的标记（* 或 (optional)）非常重要。 |
✅ 开发实现建议方案
表单开头 添加说明文：
Fields marked with * are required. （或者统一写 “All fields are required”，有选填项时写 “unless marked optional”）
添加标签：
- 写成
First Name *或Email (required)。
- 写成
ARIA属性・HTML5属性：
1 2<label for="email">Email <abbr title="required">*</abbr></label> <input id="email" required aria-required="true">不要仅依赖颜色：需要同时满足视觉和程序上的要求。
🔗 参考链接（UI指南资料）
- NN/g: Marking Required Fields in Forms (加州州立大学北岭分校, Nielsen Norman Group, Deque)
- Deque: Anatomy of Accessible Forms (Deque)
- W3C Techniques: H90 Indicating required form controls (W3C)
- TPGi: Indicating mandatory fields accessibly (TPGi)
- Contensis: UX Forms Guidelines (Contensis)
如果有需要，我还可以提供具体的 HTML／CSS 代码示例，或者适用于 Sketch・Figma 的 UI 组件设计模板。随时欢迎咨询！