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

另请参阅