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

另请参阅