ARIA: aria-invalid 屬性

描述

aria-invalid 屬性用於指示輸入欄位中輸入的值不符合應用程式將接受的格式或值。這可能包括電子郵件地址或電話號碼等格式。aria-invalid 也可用於指示必填欄位為空。

aria-invalid 屬性可與任何典型的 HTML 表單元素一起使用，並且不限於已分配 ARIA 角色的元素。

該屬性應由 JavaScript 在驗證過程結束後設置。如果確定某個值無效或超出範圍，請設定 aria-invalid="true" **並**告知使用者存在錯誤。為了獲得更好的使用者體驗，請提供如何糾正錯誤的建議。在使用者嘗試提交表單之前，請勿在空必填元素上設定 aria-invalid="true"。使用者可能仍在填寫。

注意：當 aria-invalid 與 aria-required 屬性一起使用時，在表單提交之前不應將 aria-invalid 設定為 true - 僅作為驗證的響應。

目前有四種值：除了 true 和 false 外，我們還有 grammar，當檢測到語法錯誤時可以使用；以及 spelling，用於拼寫錯誤。如果屬性不存在，或者其值為 false，或者其值為空字串，則適用預設值 false。任何其他值都將被視為設定了 true。

原生 HTML 驗證

HTML 具有原生表單驗證。當用戶提交包含錯誤控制元件的表單時，第一個具有無效值的表單控制元件會以原生方式顯示錯誤訊息。

如果表單控制元件上有一個未填寫的 required 屬性，表單將不會提交，並會顯示一條錯誤訊息，內容為“請填寫此欄位”或類似內容。原生驗證的訊息因瀏覽器而異，且無法自定義樣式。

html

<input type="number" step="2" min="0" max="100" required />

如果使用者在前面的輸入示例中輸入的值超過最大值、低於最小值或與步進值不匹配，則會顯示錯誤訊息。如果使用者輸入了“3”，原生錯誤訊息將類似於“請輸入有效值”。

如果您正在建立自己的表單驗證指令碼，請確保在無效的表單控制元件上包含 aria-invalid，同時包含樣式（使用 [aria-invalid="true"] 屬性選擇器）和訊息（使用 aria-errormessage），以幫助使用者理解錯誤所在以及如何修復它。

值

grammar: 檢測到語法錯誤。
false（預設）: 值中未檢測到錯誤。
spelling: 檢測到拼寫錯誤。
true: 使用者輸入的值驗證失敗。

此列表中的任何值都將被視為 true。

示例

以下程式碼片段展示了一個簡化的版本，包含兩個帶有附加到 blur 事件的驗證函式的表單欄位。請注意，由於 aria-invalid 的預設值為 false，因此新增此屬性到 input 元素並非嚴格必需。

html

<ul>
  <li>
    <label for="name">Full Name</label>
    <input
      type="text"
      name="name"
      id="name"
      aria-required="true"
      aria-invalid="false" />
  </li>
  <li>
    <label for="email">Email Address</label>
    <input
      type="email"
      name="email"
      id="email"
      aria-required="true"
      aria-invalid="false" />
  </li>
</ul>

document.getElementById("name").addEventListener("blur", () => {
  checkValidity(
    "name",
    " ",
    "Invalid name entered (requires both first and last name)",
  );
});

document.getElementById("email").addEventListener("blur", () => {
  checkValidity("email", "@", "Invalid email address");
});

請注意，並非必須立即在 blur 事件時驗證欄位；應用程式可以等到表單提交時再驗證（儘管這不一定推薦）。

以下程式碼片段展示了一個驗證函式，它只檢查特定字元是否存在（在實際應用中，驗證可能會更復雜）。

function checkValidity(id, searchTerm, msg) {
  const elem = document.getElementById(id);
  if (elem.value.includes(searchTerm)) {
    elem.setAttribute("aria-invalid", "false");
    updateAlert();
  } else {
    elem.setAttribute("aria-invalid", "true");
    updateAlert(msg);
  }
}

以下程式碼片段展示了 alert 函式，這些函式新增（或移除）錯誤訊息。

function updateAlert(msg) {
  const oldAlert = document.getElementById("alert");
  if (oldAlert) {
    oldAlert.remove();
  }

  if (msg) {
    const newAlert = document.createElement("div");
    newAlert.setAttribute("role", "alert");
    newAlert.setAttribute("id", "alert");
    const content = document.createTextNode(msg);
    newAlert.appendChild(content);
    document.body.appendChild(newAlert);
  }
}

請注意，alert 具有 ARIA 角色屬性設定為 alert。