Angular 18+表单提交：submit、ngSubmit与click+keydown.enter的无障碍性探讨

一、表单提交无障碍的通用共识 #

• 原生表单的默认行为是保障无障碍的核心：浏览器原生支持回车提交、键盘Tab导航、空格键激活按钮，且屏幕阅读器能正确识别表单结构与提交逻辑，无需手动模拟这些行为。
• 手动绑定click+键盘事件属于无障碍不良实践，这类做法容易遗漏边缘交互场景（比如空格键触发按钮），破坏屏幕阅读器的正常识别逻辑。

二、三种Angular表单提交方式对比 #

方式一：原生submit事件 #

<form (submit)="onSubmit()">
  <button type="submit">Submit</button>
</form>

• 完全遵循浏览器原生表单行为，支持所有合法的提交触发方式（点击按钮、回车、空格键），无障碍友好。
• 需要手动调用event.preventDefault()阻止页面默认刷新行为（如果不需要页面跳转的话）。

方式二：Angular ngSubmit事件 #

<form (ngSubmit)="onSubmit()">
  <button type="submit">Submit</button>
</form>

• Angular 18+中依然是首选方案，它是Angular专为表单设计的事件，具备以下优势：
  • 自动阻止默认页面刷新行为，无需额外处理；
  • 与Angular表单体系（模板驱动/响应式表单）深度集成，提交前可自动触发表单验证，配合ngForm或FormGroup的状态判断；
  • 完全兼容原生表单的无障碍特性，不破坏键盘导航与屏幕阅读器交互。

方式三：手动绑定click+keydown.enter #

<form>
  <button type="submit"
    (click)="onSubmit()"
    (keydown.enter)="onSubmit()"
    >Submit</button>
</form>

• 属于不推荐的不良实践：仅覆盖了点击和回车场景，遗漏了键盘用户常用的空格键激活按钮的操作，屏幕阅读器可能无法正确识别按钮的提交角色，导致无障碍体验缺失；
• 逻辑冗余，原生表单已默认支持这些触发方式，无需手动重复绑定。

内容的提问来源于stack exchange，提问作者ymoreau