Element:ariaDescribedByElements 属性
>Element 接口的 ariaDescribedByElements 属性是一个数组,其中包含为应用该属性的元素提供无障碍描述的元素。无障碍描述与无障碍名称类似(参见 ariaLabelledByElements),但提供的信息更详尽。
aria-describedby 页面提供了关于如何使用该属性和对应特性的更多信息。
值
一个 HTMLElement 子类数组。这些元素的内部文本可用空格连接,以获得无障碍描述。
读取时,返回的数组为静态且只读。写入时,赋予的数组会被复制;随后对该数组的更改不会影响属性值。
描述
该属性是使用 aria-describedby 属性设置无障碍描述的灵活替代方案。与 aria-describedby 不同,赋给此属性的元素不必具有 id 属性。
定义了元素的 aria-describedby 属性时,该属性会反映它,但仅限列出的引用 id 值与有效作用域内元素匹配的情况。设置此属性会清除对应的属性。有关反射元素引用和作用域的更多信息,请参阅属性反射指南中的反射元素引用。
示例
>获取无障碍描述
本示例展示如何使用 ariaDescribedByElements 获取通过 aria-describedby 定义的无障碍描述。
HTML
HTML 定义了两个 <span> 元素,并在 <button> 的 aria-describedby 属性中引用它们的 ID。
<button aria-describedby="trash-desc1 trash-desc2">移至回收站</button>……
<span id="trash-desc1">回收站内容将在 30 天后永久删除。</span
><span id="trash-desc2">否则后果自负!</span>
CSS
这里仅隐藏包含无障碍文本的 <span> 元素。
span {
display: none;
}
JavaScript
以下代码首先使用 Element.getAttribute() 记录 aria-describedby 属性的值(列出引用元素 id 值的字符串)。然后检查是否支持 ariaDescribedByElements,若支持则记录其值。最后通过遍历返回元素并连接其内部文本,返回无障碍字符串。
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> |