ARIA：表单角色

form 地标 标识内容区域，该区域包含项目和对象的集合，这些项目和对象作为一个整体组合在一起，在没有其他命名地标合适的情况下（例如 main 或 search）创建表单。

如果可能，请使用 HTML <form> 元素。<form> 元素在具有可访问名称（例如 aria-labelledby、aria-label 或 title）时定义 form 地标。确保文档中的每个表单都有一个唯一的标签，以帮助用户了解表单的目的。此标签应向所有用户可见，而不仅仅是辅助技术用户。当表单用于搜索功能时，请使用 search 地标而不是 form 地标。

使用 role="form" 标识页面区域；不要使用它来标识每个表单字段。即使您使用表单地标而不是 <form>，也建议您使用原生 HTML 表单控件，如 <button>、<input>、<select> 和 <textarea>。

无角色特定状态或属性。

无角色特定键盘交互

onsubmit

onSubmit 事件处理程序处理提交表单时引发的事件。任何不是 <form> 的内容都无法提交，因此您必须使用 JavaScript 构建替代数据提交机制，例如使用 fetch()。

<div role="form" id="send-comment" aria-label="Add a comment">
  <label for="username">Username</label>
  <input
    id="username"
    name="username"
    autocomplete="nickname"
    autocorrect="off"
    type="text" />

  <label for="email">Email</label>
  <input
    id="email"
    name="email"
    autocomplete="email"
    autocapitalize="off"
    autocorrect="off"
    spellcheck="false"
    type="text" />

  <label for="comment">Comment</label>
  <textarea id="comment" name="comment"></textarea>

  <input value="Comment" type="submit" />
</div>

建议使用 <form>。

<form id="send-comment" aria-label="Add a comment">…</form>

地标角色 用于识别文档中较大的整体部分。使用过多的地标角色可能会在屏幕阅读器中产生“噪音”，从而难以理解页面的整体布局。

您无需在每个表单元素（输入、文本区域、选择等）上声明 role="form"。它应该在包含表单元素的 HTML 元素上声明。理想情况下，使用 <form> 元素作为包装元素，并且不声明 role="form"。

如果表单用于搜索，则应使用更专业的 role="search" 值。

每个需要作为地标显示的 <form> 元素和表单 role 必须具有可访问名称。此名称将允许辅助技术用户能够快速了解表单地标的目的。

在赋予 role="form" 的同一元素上使用 aria-labelledby、aria-label 或 title 为其提供可访问名称。

使用 role="form"

<div role="form" id="gift-cards" aria-label="Purchase a gift card">
  <!-- form content -->
</div>

冗余描述

屏幕阅读器会宣布地标的角色类型。因此，您无需在地标的标签中描述地标是什么。例如，role="form" 以及 aria-label="Contact form" 的声明可能会被冗余地宣布为“联系表单表单”。

使用 <form> 元素会自动传达一个部分具有 form 的角色。如果可能，请优先使用它。

• `<form>` 元素
• `<legend>` 元素
• 表单（角色）：可访问的富互联网应用程序 (WAI-ARIA) 1.1