ARIA: form 角色

描述

form 地标用于标识内容区域，该区域包含一组项目和对象，当没有其他命名地标（例如 main 或 search）合适时，它们共同构成一个表单。

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

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

关联的 WAI-ARIA 角色、状态和属性

无角色特定状态或属性。

键盘交互

无角色特定键盘交互

所需的 JavaScript 功能

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> 元素和 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" 的可能会被冗余地播报为“contact form form”。

最佳实践

优先使用 HTML

使用 <form> 元素将自动通信该元素具有 form 角色。如果可能，请优先使用语义化的 <form> 元素而不是 form 角色。

规范

另见

• <form> 元素
• <legend> 元素