aria-expanded

aria-expanded 屬性設定在元素上，以指示控制元件是否展開或摺疊，以及受控元素是否顯示或隱藏。

描述

有多種小部件可以展開和摺疊，包括選單、對話方塊和手風琴面板。這些物件中的每一個反過來都具有一個互動式元素，用於控制其開啟和關閉。aria-expanded 屬性應用於此可聚焦的互動式控制元件，該控制元件切換物件的可見性。

例如，aria-expanded 應用於 DOM 樹中的父項，以指示其子分支是否顯示。父級也控制關聯子分支的可見性。

有兩種宣告可以應用於控制另一個物件可見性的物件：aria-controls 或 aria-owns 與 aria-expanded 結合使用。aria-controls 和 aria-owns 指示控制元素和受控元素之間的關係。aria-expanded 指示輔助技術受控元素是否展開或摺疊。

在擁有可擴充套件分組容器的元素上使用 aria-owns 屬性。如果可擴充套件和可摺疊分組容器不是由具有 aria-expanded 屬性的元素擁有的，請使用 aria-controls 屬性來引用分組容器。

按鈕

開啟小部件的按鈕應將 aria-controls 設定為可擴充套件小部件的 id，並將 aria-expanded 設定為小部件的當前狀態。

html
<button aria-expanded="false" aria-controls="widget1">Show widget</button>

當小部件可見時，控制物件透過在其上設定 aria-expanded="true" 來傳遞該資訊。控制物件的無障礙名稱應反映此更改。

html
<button aria-expanded="true" aria-controls="widget1">Hide widget</button>

當 menu 顯示時，切換該選單可見性的按鈕物件將設定 aria-expanded="true"。當選單隱藏時，可以省略 aria-expanded。如果在選單隱藏時指定，則應將其設定為 aria-expanded="false"。當子選單不可見時，其父級 menuitem 具有 aria-expanded。當子選單可見時，它應設定為 true。

組合框

預設情況下，某些角色預設隱藏或摺疊，而其他角色預設開啟或展開。具有角色 combobox 的元素的 aria-expanded 的預設值為 false。當組合框彈出視窗不可見時，具有角色 combobox 的元素將 aria-expanded 設定為 false。這是預設狀態。當彈出視窗元素可見時，aria-expanded 應設定為 true。

html
<label for="username">Username</label>
<input id="username" name="username" aria-describedby="username-desc" />
<button
  aria-expanded="false"
  aria-controls="username-desc"
  aria-label="Help about username"
  type="button">
  <span aria-hidden="true">?</span>
</button>
<p id="username-desc" hidden>
  Your username is the name that you use to log in to this service.
</p>

注意：aria-expanded 屬性的存在表示控制。避免在不控制其他元素的展開狀態的元素上包含它。

樹項

每個具有角色 treeitem 的元素充當父節點，當節點處於關閉狀態時，aria-expanded="false"，當節點處於開啟狀態時，aria-expanded="true"。沒有子節點的結束節點不應具有 aria-expanded 屬性，因為如果它們要具有它，它們將被錯誤地描述為輔助技術的父節點。

行

在 treegrid 中，父行是可以展開或摺疊以顯示或隱藏表或網格中一組子行的行。每個父行都將在行元素或行中包含的單元格上設定 aria-expanded 狀態。當子行隱藏時，將設定 aria-expanded="false"。當子行顯示時，將設定 aria-expanded="true"。不控制子行顯示的行根本不應該包含 aria-expanded 屬性，因為包含該屬性將定義行為父行。

值

false

此元素擁有的或控制的分組元素已摺疊。

true

此元素擁有的或控制的分組元素已展開。

undefined （預設）

該元素不擁有或控制可擴充套件的分組元素。

關聯介面

Element.ariaExpanded

ariaExpanded 屬性是 Element 介面的一部分，它反映了 aria-expanded 屬性的值。

ElementInternals.ariaExpanded

ariaExpanded 屬性是 ElementInternals 介面的一部分，它反映了 aria-expanded 屬性的值。

關聯角色

用於角色

繼承到角色

規範

規範
可訪問的富網際網路應用 (WAI-ARIA)
# aria-expanded

另請參閱