此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

Element:ariaDescribedByElements 属性

基线 2025
最近可用

自 2025年4月 起,此特性已在最新浏览器中得到支持。但在较旧的设备或浏览器中可能无法运行。

Element 接口的 ariaDescribedByElements 属性是一个数组,其中包含为应用该属性的元素提供无障碍描述的元素。无障碍描述与无障碍名称类似(参见 ariaLabelledByElements),但提供的信息更详尽。

aria-describedby 页面提供了关于如何使用该属性和对应特性的更多信息。

一个 HTMLElement 子类数组。这些元素的内部文本可用空格连接,以获得无障碍描述。

读取时,返回的数组为静态且只读。写入时,赋予的数组会被复制;随后对该数组的更改不会影响属性值。

描述

该属性是使用 aria-describedby 属性设置无障碍描述的灵活替代方案。与 aria-describedby 不同,赋给此属性的元素不必具有 id 属性。

定义了元素的 aria-describedby 属性时,该属性会反映它,但仅限列出的引用 id 值与有效作用域内元素匹配的情况。设置此属性会清除对应的属性。有关反射元素引用和作用域的更多信息,请参阅属性反射指南中的反射元素引用

示例

获取无障碍描述

本示例展示如何使用 ariaDescribedByElements 获取通过 aria-describedby 定义的无障碍描述。

HTML

HTML 定义了两个 <span> 元素,并在 <button>aria-describedby 属性中引用它们的 ID。

html
<button aria-describedby="trash-desc1 trash-desc2">移至回收站</button>……
<span id="trash-desc1">回收站内容将在 30 天后永久删除。</span
><span id="trash-desc2">否则后果自负!</span>

CSS

这里仅隐藏包含无障碍文本的 <span> 元素。

css
span {
  display: none;
}

JavaScript

以下代码首先使用 Element.getAttribute() 记录 aria-describedby 属性的值(列出引用元素 id 值的字符串)。然后检查是否支持 ariaDescribedByElements,若支持则记录其值。最后通过遍历返回元素并连接其内部文本,返回无障碍字符串。

js
const buttonElement = document.querySelector("button");
log(`aria-describedby: ${buttonElement.getAttribute("aria-describedby")}`);
// ariaDescribedByElements 特性检测
if ("ariaDescribedByElements" in Element.prototype) {
  // 获取 ariaDescribedByElements
  const buttonElements = buttonElement.ariaDescribedByElements;
  log(`ariaDescribedByElements: ${buttonElements}`);

  // 从元素中获取无障碍描述
  const text = buttonElements.map((e) => e.textContent.trim()).join("");
  log(`无障碍描述:${text.trim()}`);
} else {
  log("浏览器不支持 element.ariaDescribedByElements");
}

结果

下面的日志显示原始元素引用、关联或返回的元素,以及无障碍描述。

规范

规范
Accessible Rich Internet Applications (WAI-ARIA)
# dom-ariamixin-ariadescribedbyelements

浏览器兼容性

参见