ARIA: aria-required 屬性
aria-required 屬性表示在提交表單之前，使用者必須在元素中輸入資訊。
描述
當語義化 HTML 的 <input>、<select> 或 <textarea> 元素必須具有值時，應為其應用 required 屬性。HTML 的 required 屬性會阻止表單的提交，除非必需的表單控制元件具有有效值，同時確保使用輔助技術的導航者能夠理解哪些語義化表單控制元件需要有效的內容。
當使用非語義化元素（例如，具有 role 為 checkbox 的 <div>）建立表單控制元件時，應包含 aria-required 屬性，並將其值設定為 true，以告知輔助技術，在提交表單之前，使用者必須在該元素中輸入資訊。aria-required 屬性可與 HTML 表單元素一起使用；它不僅限於具有 ARIA role 的元素。
與設定在語義化 HTML 表單控制元件上的 HTML required 屬性類似，aria-required 屬性明確地向輔助技術傳達該元素在提交表單前是必需的。在語義化 HTML 表單控制元件上設定 required 屬性，如果控制元件沒有值，將阻止該控制元件被提交——在使用者嘗試提交表單時，某些瀏覽器會提供原生的錯誤訊息，指出必需的值無效。aria-required 屬性，與其他所有 ARIA 狀態和屬性一樣，對元素的**功能**沒有影響。功能和行為必須透過 JavaScript 新增。
注意： ARIA 僅修改可訪問性樹，改變輔助技術如何向用戶呈現內容。ARIA 不會改變元素的任何功能或行為。當不使用語義化 HTML 元素來達到其預期目的和預設功能時，您必須使用 JavaScript 來管理行為、焦點和 ARIA 狀態。
CSS 的 :required 和 :optional 偽類分別根據 <input>、<select> 和 <textarea> 元素是否是必需的或可選的來進行匹配。當使用非語義化元素作為表單控制元件時，您將無法獲得此 CSS 偽類選擇器的好處。但是，如果屬性存在，您可以使用屬性選擇器：[aria-required="true"] 或 [aria-required="false"]。
如果表單同時包含必需和可選的表單元素，則應透過視覺處理來指示必需的元素，該處理不應僅依賴顏色來傳達含義。通常使用描述性文字和/或圖示。
注意： 哪些元素是必需的，應該對所有使用者都顯而易見。請確保視覺呈現以一致、可見的方式指示表單控制元件是必需的，並記住顏色不足以傳達資訊。
示例
該屬性應新增到表單控制元件角色（form-control role）上。如果使用者需要填寫電子郵件地址 textbox，則應在 textbox 上包含 aria-required="true"。
<div id="tbLabel">Email Address *</div>
<div
role="textbox"
contenteditable
aria-labelledby="tblabel"
aria-required="true"
id="email1"></div>
注意： 如果欄位的標籤已經包含“required”（必需）一詞，則建議省略 aria-required 屬性。這樣可以避免螢幕閱讀器兩次讀出“required”這個詞。
在此示例中，必須使用 JavaScript 來阻止包含的表單在 textbox 為空時被提交。
這本可以用語義化的方式編寫，無需 JavaScript
<label for="email1">Email Address (required)</label>
<input type="email" id="email1" required />
值
相關介面
Element.ariaRequired-
Element介面的ariaRequired屬性反映了aria-required屬性的值。 ElementInternals.ariaRequired-
ElementInternals介面的ariaRequired屬性反映了aria-required屬性的值。
相關角色
用於角色
繼承至角色
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # aria-required |