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 上檢視此頁面 • 報告此內容的錯誤