aria-required="true"单独使用无效，因屏幕阅读器不播报该属性；必须通过label文本、aria-label或aria-labelledby显式提供“必填”文字提示，且避免与required混用。
aria-required 本身不会被屏幕阅读器主动朗读，仅设置它无法让视障用户感知“必填”——必须配合语义化标签或显式文本提示才能生效。
为什么 aria-required="true" 单独用没用
屏幕阅读器（如 NVDA、VoiceOver）默认不播报 aria-required 属性。它只是供辅助技术内部使用的状态标记，不触发语音反馈。你写 <input aria-required="true">，用户听到的仍是“编辑框”，不会多出“必填”二字。
真正能让视障用户听出“必填”的三种做法
必须让“必填”信息成为可读的文本内容或通过 aria-label/aria-labelledby 显式注入：
- 在
<label></label>里直接加文字，例如：<label>邮箱 <strong>（必填）</strong></label><input required> - 用
aria-label合并提示：<input aria-label="邮箱（必填）" required>—— 注意：此时要移除原<label></label>，否则会重复朗读 - 用
aria-labelledby引用带“必填”字样的独立元素：<span id="email-label">邮箱</span><span id="req-mark">（必填）</span><input aria-labelledby="email-label req-mark" required>
required 属性和 aria-required 别混用
二者作用不同，且存在优先级冲突：
-
required是原生 HTML 表单验证属性，影响提交行为 + 触发浏览器默认提示（但不保证朗读） -
aria-required="true"仅用于非表单控件（如role="combobox"的自定义下拉），或当控件没有required但逻辑上必须填时才补充 - 如果同时写了
required和aria-required="true"，部分旧版辅助技术可能误判，建议只用required+ 文本提示
容易忽略的视觉-听觉同步问题
很多团队只在视觉上用红色星号 * 标“必填”，但屏幕阅读器完全不知道这个符号含义：
- 不要只靠
<span class="star">*</span>—— 它既无语义，也不被朗读 - 如果坚持用星号，必须用
aria-hidden="true"隐藏它，并把“必填”文字放进<label></label>或aria-label - 确保错误提示也包含“此项为必填”字样，而不仅是“请填写”——后者对认知障碍用户不够明确
最稳妥的做法永远是：让“必填”变成用户能听见的、上下文清晰的自然语言，而不是依赖某个 ARIA 属性自动生效。ARIA 不是魔法，它是补丁；语义和文本才是主干。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
