当在 等原生语义化表单元素上错误使用 aria-required 属性时，会触发无障碍检测工具（如 AXE、ARC）报错：“The aria-required attribute is not allowed on the generic role”。根本原因在于：aria-required 仅适用于非语义化自定义控件，而原生 应直接使用原生 required 属性或直接省略（表示非必填）。
当在 `` 等原生语义化表单元素上错误使用 `aria-required` 属性时，会触发无障碍检测工具（如 axe、arc）报错：“the aria-required attribute is not allowed on the generic role”。根本原因在于：`aria-required` 仅适用于非语义化自定义控件，而原生 `` 应直接使用原生 `required` 属性或直接省略（表示非必填）。
在 Web 无障碍开发中，ARIA 属性的设计原则是“增强而非替代”——即仅在 HTML 原生语义不足时才引入 ARIA。<input>、<select></select>、<textarea></textarea> 等原生表单控件已内置完整的可访问性语义（包括 required、disabled、invalid 等状态），因此不应混用 aria-required。
✅ 正确做法：
- 若字段必须填写，请使用原生
required属性：<input matInput id="zipcode-search" formControlName="zipCode" placeholder="Zip Code / Postal Code - enter full or partial value" required>
- 若字段非必填（即逻辑上
aria-required="false"所试图表达的含义），则完全移除aria-required—— 因为默认即为非必填，显式声明aria-required="false"不但冗余，更违反 ARIA 规范，导致检测工具报错。
⚠️ 特别注意：
-
aria-required="false"在任何情况下都不应出现在<input>上；它既无实际作用，又破坏合规性。 -
aria-invalid可保留（用于动态反馈验证状态），但需确保其值为布尔字符串"true"或"false"，且仅在 JS 主动控制校验状态时使用（例如配合 Angular Reactive Forms 的statusChanges）。 - ID 命名建议修正拼写（如
zipcode-seach→zipcode-search），提升可维护性与可读性。
? 总结：
始终优先使用 HTML 原生属性（required、disabled、readonly 等）表达控件状态；仅当构建基于 <div>/<code><span></span> 的自定义控件（如模拟下拉、开关等）时，才考虑使用 aria-required 配合 role 属性来补全语义。遵循这一原则，既能通过无障碍自动化检测，也能保障屏幕阅读器用户获得准确、一致的操作预期。
