星号必须放在label元素内部且为真实文本节点，确保屏幕阅读器可读、语义正确、多语言适配；伪元素或绝对定位方式均不可访问。
必填字段的星号该放在 label 里还是外面？
星号必须和 label 文本绑定，否则屏幕阅读器读不出来，也破坏语义。常见错误是把 * 写在 input 后面、或用绝对定位盖在右上角——那只是“看起来像必填”，实际无障碍支持为零。
正确做法：把 * 放进 label 元素内部，紧贴文字末尾（如 ），再用 CSS 控制颜色或字体大小。这样语音朗读时会自然读出“用户名星号”，用户明确感知其含义。
- 别用
*或空格+星号——可能被读成“用户名 星号”，中间停顿怪异 - 别用伪元素
::after添加星号——多数读屏软件忽略伪内容 - 如果表单用
aria-labelledby拆分标签，星号必须出现在被引用的文本节点中
用 CSS 控制星号样式但不破坏可访问性
视觉上想让星号变红、变小、不占空格？可以，但前提是它仍是 DOM 中的真实文本节点。用 color、font-size、vertical-align 调整即可，不要用 display: none 或 visibility: hidden 隐藏它。
示例：
label.required::after { content: "*"; color: #d32f2f; font-size: 0.8em; }
❌ 这样写不行——伪元素内容不可读。应改为：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
<label>邮箱<span aria-hidden="true" style="color:#d32f2f;font-size:0.8em;">*</span></label>
并确保主文本中仍含可读星号，或用 aria-label 补充说明。
-
aria-hidden="true"只能用于纯装饰性星号，且必须搭配真实可读星号存在 - 若整个表单用 JS 动态加星号，务必同步更新
aria-required="true"和label文本 - 旧版 IE 不支持
aria-required，但required属性本身已足够触发基础校验和语义识别
required 属性和视觉提示必须一致
写了 required 却没标星号，或标了星号但没写 required，都会导致行为与预期脱节。浏览器原生校验只看属性，不看星号；而用户只看星号——两者错位，就是体验断点。
- 后端验证不能替代
required：它影响表单提交拦截、焦点管理、以及移动端键盘类型（如 email 字段自动唤起 @ 键） - 用 JS 动态切换必填状态时，要同时操作
input.required和对应label中的星号节点，不能只改样式类 - 某些 UI 库（如 Ant Design）默认用
asterisk插槽控制星号，但若关闭该插槽却保留required，就会产生隐性不一致
多语言项目里星号位置容易翻车
中文习惯星号跟在文字后（“姓名*”），但阿拉伯语、希伯来语等 RTL 语言需星号在左侧（“*الاسم”）。硬编码 * 在固定位置会出问题。
稳妥方案：把星号逻辑交给 i18n 工具处理，比如在翻译文件中定义 "field_required": "{{field}}*" 或 "field_required": "*{{field}}"，按 locale 自动拼接。CSS 的 direction 和 text-align 无法修正语义顺序。
- 别依赖
dir="auto"让浏览器猜——它只看第一个强方向字符，对“姓名*”这种混合内容不可靠 - 若用 React/Vue 等框架，避免在模板里写死
{{ label }}*，应封装成带 locale 意识的RequiredLabel组件 - 测试时真机切 RTL 系统（如 iOS 设置语言为阿拉伯语），别只靠 Chrome DevTools 模拟
星号不是装饰，是契约。它连接着代码里的 required、DOM 中的文本节点、屏幕阅读器的语音流，还有用户心里那个“不填这里就过不去”的预期。漏掉任一环，都算没标清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
