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>邮箱 <strong>(必填)</strong></label><input required> - 用
aria-label合并提示:<input aria-label="邮箱(必填)" required>—— 注意:此时要移除原<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>或aria-label - 确保错误提示也包含“此项为必填”字样,而不仅是“请填写”——后者对认知障碍用户不够明确
最稳妥的做法永远是:让“必填”变成用户能听见的、上下文清晰的自然语言,而不是依赖某个 ARIA 属性自动生效。ARIA 不是魔法,它是补丁;语义和文本才是主干。



















