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