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 来：