form

何时使用

用于重要的表单 — 注册、结账、联系、编辑个人信息等 — 这类表单值得作为地标参与导航。与 region 类似，<form> 元素仅在拥有无障碍名称（aria-label 或 aria-labelledby）时才会被提升为表单地标。

表单的无障碍名称应描述其用途，如”联系表单”、“注册”、“编辑个人信息”。避免使用泛化的”表单” — 与角色宣告内容重复。

若该表单是搜索表单，应改用 <search>（或 role="search"） — 搜索地标更为具体。

单个输入框的简报订阅或搜索框不需要使用表单地标。此角色应保留给具有三个或更多有意义输入项且用途明确的表单。

何时添加标签

始终需要标签 — 若没有名称，<form> 不会成为地标。当页面中存在多个表单（例如评论表单和简报订阅表单）时，每个表单必须拥有不同的名称。

优先使用 aria-labelledby 指向可见标题，而非 aria-label — 这样可以将可见标题与地标宣告关联起来。

常见错误

• <form> 既无 aria-label 也无 aria-labelledby。该表单不是地标，用户无法通过地标导航跳转至此。
• aria-label="Form" — 与角色宣告重复，意义不大。
• 同时使用 <form role="search"> 和 aria-label="Search"。搜索地标已涵盖此场景；再加 form 角色会产生冲突。
• 登录表单和注册表单都标注为”Sign in” — 在地标菜单中无法区分。
• 在单个输入框外包裹 <form> 并将其标注为表单地标。过度使用；此处添加地标并无实际价值。

示例

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Contact us</h2>
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>