ARIA：aria-errormessage 屬性

描述

當存在使用者建立的錯誤時，您希望告知使用者錯誤的存在並告訴他們如何修復。您需要使用兩個屬性：設定 aria-invalid="true" 來定義物件處於錯誤狀態，然後新增 aria-errormessage 屬性，其值為包含該物件錯誤訊息文字的元素（或元素）的 id。

aria-errormessage 屬性應僅在物件的值無效時使用；即 aria-invalid 設定為 true 時。如果物件有效，並且您包含 aria-errormessage 屬性，請確保引用的元素被隱藏，因為其中包含的訊息是不相關的。

當 aria-errormessage 相關時，它引用的元素必須是可見的，以便使用者可以看到或聽到錯誤訊息。

通常，您會希望包含錯誤訊息的元素成為一個 ARIA live region，例如當用戶提供了無效值後顯示錯誤訊息時。錯誤訊息應描述問題所在，並告知使用者使物件有效的必要操作。將錯誤訊息新增為 ARIA live region 會通知輔助技術，即使錯誤訊息不會以其他方式傳達給使用者，使用者也能從中受益。

如果故障明顯可見，並且需要對錯誤進行明確描述，請包含可見的錯誤訊息，並透過 aria-errormessage 屬性將無效物件與其關聯。

示例

我們建立了一些樣式來

隱藏所有錯誤訊息，
使無效物件顯示為無效，以及
顯示緊跟在無效物件之後的同級錯誤訊息。

我們使用 aria-invalid="true" 來識別無效物件

css

.errormessage {
  visibility: hidden;
}

[aria-invalid="true"] {
  outline: 2px solid red;
}

[aria-invalid="true"] ~ .errormessage {
  visibility: visible;
}

當物件無效時，我們使用 JavaScript 新增 aria-invalid="true"。上面的 CSS 使跟在無效物件後面的 .errormessage 變得可見。

html

<p>
  <label for="email">Email address:</label>
  <input
    type="email"
    name="email"
    id="email"
    aria-invalid="true"
    aria-errormessage="err1" />
  <span id="err1" class="errormessage">Error: Enter a valid email address</span>
</p>

當從有效變為無效時，此示例中唯一的 JavaScript 更改是更新電子郵件輸入物件的 aria-invalid。由於錯誤訊息跟在輸入框後面，並且在可訪問性樹中變得可見和可用，因此我們可以保持示例的簡單性。我們也可以應用 aria-live 屬性或使用 live region 角色，例如 alert。