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> 元素