ARIA：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 來：