aria-errormessage

物件上的 aria-errormessage 屬性標識提供該物件錯誤訊息的元素。

描述

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

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

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

通常，您希望包含錯誤訊息的元素成為 ARIA 即時區域，例如當在使用者提供無效值後向使用者顯示錯誤訊息時。錯誤訊息應描述錯誤所在，並告知使用者需要採取哪些措施來使物件有效。將錯誤訊息新增為 ARIA 即時區域可通知輔助技術使用者可能會從錯誤訊息內容中受益，即使該錯誤訊息不會以其他方式傳達給使用者。

如果錯誤在視覺上明顯，並且需要對錯誤進行明確說明，則應包含可見的錯誤訊息，並使用 aria-errormessage 屬性將無效物件與錯誤訊息關聯起來。

示例

我們建立一些樣式來

  1. 隱藏所有錯誤訊息，
  2. 使無效物件看起來無效，並
  3. 顯示位於無效物件之後的兄弟錯誤訊息。

我們使用 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 屬性，或使用諸如 alert 之類的即時區域角色。

值

id 引用

包含當前元素錯誤訊息的元素的 id 值

關聯角色

在角色中使用

從角色繼承

規範

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

另請參閱