aria-disabled

aria-disabled 狀態指示元素是可感知的但被停用的，因此它不可編輯或操作。

描述

aria-disabled 屬性設定為 true 時，表示其設定的元素及其所有可聚焦的後代都應處於停用狀態。此宣告將告知使用輔助技術的使用者（例如螢幕閱讀器）這些元素不應可編輯或操作。

與 HTML 的 disabled 布林屬性不同，後者將在語義上將表單控制元件傳達為已停用，更改其樣式以反映其狀態並抑制所有功能，以及阻止元素的值參與表單提交，aria-disabled="true" **僅** 在語義上將這些元素公開為已停用。Web 開發人員必須手動確保此類元素在暴露于禁用狀態時會抑制其功能。

當需要停用原生 HTML 表單控制元件時，開發人員需要指定 disabled 屬性，因為它預設提供了停用控制元件的所有預期功能。但是，在某些情況下，元素需要公開為已停用，但使用者仍可以透過 Tab 鍵導航找到它們。這樣做可以提高其可發現性，因為它們不會從網頁的焦點順序中移除，因為 aria-disabled 不會更改此類元素的可聚焦性，並且元素也不會被預設瀏覽器樣式變暗，從而使其更易於閱讀。此功能的一些有用示例包括

  • 與不可摺疊的手風琴面板關聯的標題按鈕元素，
  • 一個按鈕，它對於保持在頁面焦點順序中很重要，但其操作當前不可用 - 例如提交表單，
  • 選單小部件中暫時不活動的專案，否則這些專案將透過標準鍵盤導航跳過。

在所有這些情況下，使用者可能希望透過標準鍵盤導航找到這些元素，儘管該控制元件的功能已移除或“停用”。開發人員仍然需要使用 JavaScript 完全停用元素的功能，同時更改元素的外觀，以便有視力的使用者知道它已停用。

注意： 停用狀態適用於具有 aria-disabled="true" 的元素及其所有可聚焦的後代。在容器元素上使用此屬性時要小心。特別是在容器可能同時包含表單控制元件和連結的情況下 - 其中意圖可能是將表單控制元件公開為處於停用狀態，但**不** 將連結傳達為“停用”。

使用 aria-disabled 屬性而不是 HTML disabled 屬性的另一個原因是，如果您建立了需要標記為停用的自定義控制元件，但未使用允許 disabled 屬性的元素。例如，在以下程式碼段中，<div> 用於建立需要標記為停用的自定義按鈕。但是，<div> 元素不期望也不尊重 disabled 屬性 - 即使它被賦予 role="button" 以更改其公開的 ARIA 角色。aria-disabled 屬性是停用此類自定義控制元件所必需的。

html
<div role="button" aria-disabled="true" tabindex="-1">Edit</div>

與需要使用 JavaScript 確保具有 aria-disabled="true" 的元素不可用類似，該元素也需要樣式調整。與 HTML disabled 屬性形成對比的是，指定它會應用 :disabled 使用者代理樣式，而新增 aria-disabled="true" 則不會。可以使用 屬性選擇器 [aria-disabled="true"] 對元素進行樣式設定。

css
[aria-disabled="true"] {
  opacity: 0.5;
}

如果您有意使用 aria-disabled 屬性以允許表單控制元件保持在頁面的鍵盤焦點順序中，尤其是在元素表示所有使用者都應該能夠感知的重要內容時，則可能需要使用仍然滿足顏色對比要求的樣式。例如，引入不可摺疊的手風琴面板的停用按鈕/標題仍然是需要可讀的內容。

css
@media (forced-colors: active) {
  [aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}

forced-colors 媒體查詢 檢測 使用者代理 是否啟用了強制顏色模式；如果是，則文字和邊框顏色均設定為 系統顏色 greyText。

在使用 aria-disabled 而不是原生 HTML 屬性時，需要牢記的另一件事是，ARIA 屬性需要手動樣式設定以在 Windows 高對比度模式下視覺上將元素傳達為已停用。

注意： 如果您使用 CSS 的 pointer-events: none; 使元素不可點選，請確保也使用 JavaScript 停用互動性。pointer-events: none; 可防止滑鼠點選，但不會阻止透過鍵盤啟用元素。

js
function onClick(event) {
  event.preventDefault();
}

function toggleDisabled(element, status, update) {
  if (status) {
    //element.input.disabled = false;
    element.setAttribute("aria-disabled", "false");
    update.textContent = "The element is now enabled.";
    element.addEventListener("click", onClick);
  } else {
    //element.input.disabled = true;
    element.setAttribute("aria-disabled", "true");
    update.textContent = "The element is now disabled.";
    element.removeEventListener("click", onClick);
  }
}

當從aria-disabled="true"切換到"false"時，使用 JavaScript 來

  1. 將值切換為false（或完全刪除該屬性），
  2. 啟用元素，以及
  3. 讓使用者知道控制元件現在已啟用。

如果您僅使用 CSS 透過屬性選擇器來設定停用狀態的樣式，則選擇器將不再匹配，並且停用樣式將不再生效。

值

真

元素已停用

假

元素未停用

關聯介面

Element.ariaDisabled

Element 介面的一部分 ariaDisabled 屬性反映了aria-disabled屬性的值，該屬性指示元素是可感知的但已停用，因此它不可編輯或無法操作。

ElementInternals.ariaDisabled

ElementInternals 介面的 ariaDisabled 屬性反映了aria-disabled屬性的值。

關聯角色

用於角色

繼承到角色

規範

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

另請參閱