aria-required

aria-required 屬性指示在提交表單之前，元素上需要使用者輸入。

描述

當語義 HTML <input>、<select> 或 <textarea> 必須具有值時，應將其應用於 required 屬性。HTML required 屬性停用提交表單，除非必填表單控制元件具有有效值，同時確保使用輔助技術的使用者瞭解哪些語義表單控制元件需要有效內容。

當使用非語義元素（例如具有 角色 為 checkbox 的 <div>）建立表單控制元件時，應包含 aria-required 屬性，其值為 true，以指示輔助技術元素需要使用者輸入才能提交表單。aria-required 屬性可用於 HTML 表單元素；它不限於分配了 ARIA 角色的元素。

與設定在語義 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"]。

如果表單同時包含必填和可選表單元素，則應使用不完全依賴顏色來傳達含義的處理方法在視覺上指示必填元素。通常，使用描述性文字和/或圖示。

注意：哪些元素是必填的應該對所有使用者都清晰可見。確保視覺呈現以一致、可見的方式指示表單控制元件是必填的，並記住顏色不足以傳達資訊。

示例

應將屬性新增到表單控制元件角色。如果使用者需要填寫電子郵件地址 textbox，請在文字框上包含 aria-required="true"。

html
<div id="tbLabel">Email Address *</div>
<div
  role="textbox"
  contenteditable
  aria-labelledby="tblabel"
  aria-required="true"
  id="email1"></div>

注意：如果欄位的標籤已包含“必填”一詞，建議省略 aria-required 屬性。這樣可以避免螢幕閱讀器兩次讀出“必填”一詞。

在此示例中，必須使用 JavaScript 來防止在文字框沒有內容的情況下提交包含的表單。

這可以用語義的方式編寫，無需 JavaScript

html
<label for="email1">Email Address (required)</label>
<input type="email" id="email1" required />

值

true

該元素需要一個值或必須選中才能提交表單。

false

該元素不是必填的。

關聯介面

Element.ariaRequired

ariaRequired 屬性（Element 介面的一部分）反映 aria-required 屬性的值。

ElementInternals.ariaRequired

ariaRequired 屬性（ElementInternals 介面的一部分）反映 aria-required 屬性的值。

關聯角色

用於角色

繼承到角色

規範

規範
可訪問的富網際網路應用程式 (WAI-ARIA)
# aria-required

另請參閱