ElementInternals: ariaBrailleLabel 属性

Baseline 2024

新推出

自 2024 年 9 月起，此功能已可在最新设备和浏览器版本上使用。此功能可能无法在旧设备或浏览器上使用。

ElementInternals 接口的 ariaBrailleLabel 属性反映了 aria-braillelabel 属性的值，该属性定义了元素的 ARIA 盲文标签。

此元素标签可由能够以盲文显示内容的辅助技术使用，但仅当特定于盲文的标签能改善用户体验时才应设置。aria-braillelabel 属性包含有关何时应设置该属性的附加信息。

值

一个打算被转换为盲文的字符串。

示例

此示例演示了如何获取和设置 ariaBrailleLabel 属性。

假设我们定义了一个名为 <star-rating> 的自定义元素，其中元素的内部盲文标签设置为元素 aria-braillelabel 属性的值。

class StarRating extends HTMLElement {
  constructor() {
    super();
    this._internals = this.attachInternals();
    this._internals.ariaRole = "slider";
    this._internals.ariaBrailleLabel = this.ariaBrailleLabel;
  }

  // …
}

customElements.define("star-rating", StarRating);

并且我们包含带有标签文本“3 out of 5 stars”的自定义元素，以及一个值为 "3" 的 aria-braillelabel 属性。这使得盲文显示器能够以盲文显示“slider 3”，而不是更冗长的“slider gra 3 out of 5 stars”。

html

<star-rating id="rate" aria-braillelabel="3">3 out of 5 stars</star-rating>

<pre id="log"></pre>

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logInternals = document.querySelector("#log");
function log(text) {
  logInternals.innerText = `${logInternals.innerText}${text}\n`;
  logInternals.scrollTop = logInternals.scrollHeight;
}

代码使用 ariaBrailleLabel 属性来获取和设置盲文标签。

const el = document.querySelector("star-rating");
log(el._internals.ariaBrailleLabel);
el._internals.ariaBrailleLabel += "*";
log(el._internals.ariaBrailleLabel);

规范

规范
无障碍富互联网应用程序 (WAI-ARIA) # dom-ariamixin-ariabraillelabel

浏览器兼容性

另见

ElementInternals.ariaBrailleRoleDescription

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年4月28日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的错误