一、理解 aria-required 的作用和意义
aria-required 的基本含义
在 HTML 与无障碍领域，aria-required 是一种布尔属性，用于告知辅助技术某个控件的输入是必填的。它的作用是为自定义控件提供可访问性标识，帮助实现更好的无障碍表单体验。本篇文章聚焦 aria-required 的正确用法，以提供实战层面的指导。
需要注意的是，对于原生的输入控件，推荐使用原生的 required 属性来实现必填提示；aria-required 在此情景通常是冗余的，但在自定义控件中，它是向辅助技术传达必填状态的关键手段。
在实际应用中，aria-required 常与 aria-describedby、错误提示信息结合使用，以确保屏幕阅读器在聚焦时能够清晰地读出该字段的必填性，提升整个表单的可访问性。
<!-- 自定义控件示例：非原生输入控件，需标注必填 -->
<div role="textbox" aria-label="用户名" aria-required="true" tabindex="0"></div>
<span id="userHelp">请填写用户名。</span>
<p aria-describedby="userHelp">用户名为必填项。</p>
aria-required 与自定义控件的协同工作
对于自定义控件，aria-required 是向辅助技术传达必填状态的核心属性，需要与 aria-invalid、aria-describedby 以及错误提示一起使用，才能获得完整的无障碍体验。
在自定义控件的场景中，若控件本身无法暴露原生的必填行为，务必通过 aria-required="true" 来提供可访问性信号，并通过可读的错误信息来实现清晰的用户反馈。
<!-- 自定义控件与必填标识的组合示例 -->
<div role="textbox" aria-label="生日" aria-required="true" tabindex="0"></div>
<span id="birthHelp" class="help">请选择出生日期。</span>
<p aria-describedby="birthHelp">出生日期为必填项。</p>二、在 HTML 表单中的正确应用方式
标记必填字段与无障碍表达
在常见的 HTML 表单 中，优先使用原生的 required 属性来标记必填字段，这样做能最大程度地兼容各类屏幕阅读器和浏览器引擎。
当字段为自定义控件或不可直接使用原生输入时，应该结合 aria-required 来表达必填状态，并确保有清晰的可访问性文本。
下面的示例同时演示了原生控件的必填与自定义控件的必填表达，以及如何关联描述文本以提升可访问性。
<form><label for="email">邮箱地址</label><input id="email" type="email" required aria-required="true" aria-describedby="emailHelp" /><span id="emailHelp" class="help">请输入有效的邮箱地址。</span>
</form>提升可访问性错误提示的写法
当字段无效时，使用 aria-invalid="true"、aria-describedby 指向错误信息，并通过 aria-live 动态（如 polite）更新错误内容，确保屏幕阅读器能及时告知用户。
为避免误导，务必让错误信息与字段的描述文本彼此独立，并清晰指向失败原因。
以下示例展示了一个带有错误提示的输入场景及其关联文本。
<input id="email" type="email" aria-invalid="true" aria-describedby="emailError" />
<span id="emailError" role="alert" aria-live="polite" class="error">邮箱格式不正确，请重新输入。</span>const email = document.getElementById('email');
email.addEventListener('input', function() {if (this.value.trim() === '') {this.setAttribute('aria-invalid', 'true');document.getElementById('emailError').textContent = '邮箱不能为空';} else {this.removeAttribute('aria-invalid');document.getElementById('emailError').textContent = '';}
});三、aria-required 与屏幕阅读器的协同工作
兼容性与注意事项
在无障碍场景中，aria-required 与浏览器原生的 required 属性具有不同的兼容侧重点。对于 原生输入控件，优先使用 required，以确保广泛的屏幕阅读器兼容性；而对于 自定义控件，应使用 aria-required 来传达必填状态，避免信息缺失。
不同的屏幕阅读器在朗读必填信息时可能表现不同，实践中应通过测试来验证跨平台的可访问性。关键点在于确保有清晰的文本描述和可聚焦的提示区域。
为了增强动态反馈后的可访问性，常结合 aria-live、aria-describedby 以及明确的错误文本来实现即时通知。
<!-- 自定义控件的必填表达与错误提示综合示例 -->
<div role="combobox" aria-label="城市" aria-required="true" aria-expanded="false" tabindex="0"></div>
<span id="cityHelp" class="help">请选择城市。</span>
<span id="cityError" role="alert" aria-live="polite" class="error">请选择一个有效城市。</span>四、实践要点和常见误区
常见错误与正确写法
在实现 aria-required 时，常见错误包括仅添加属性而不提供可访问性文本、在非聚焦元素上使用 aria-required、以及缺少与错误信息的关联文本。正确实践应确保字段具备可聚焦的描述和清晰的错误反馈。
另一种常见误区是把 aria-required 作为替代 required 的手段，而忽略原生控件的语义。对于原生控件，required 是更标准、优先级更高的标识；仅在自定义控件中才结合 aria-required 使用。
为了确保一致性，建议在可访问性文档中列出字段的必填标识、错误信息文本和对应的 ARIA 关系，以便团队成员遵循统一实现。
<!-- 原生控件的最佳实践 -->
<label for="username">用户名</label>
<input id="username" name="username" type="text" required aria-describedby="usernameHelp" />
<span id="usernameHelp" class="help">用户名为必填项，长度应在3-20字符。</span><!-- 自定义控件的辅助提示 -->
<label for="city" id="cityLabel">城市</label>
<div id="city" role="combobox" aria-labelledby="cityLabel" aria-required="true" tabindex="0"></div>
<span id="cityHelp" class="help">请选择城市。</span>
<span id="cityError" role="alert" aria-live="polite" class="error">请选择一个有效城市。</span>