ARIA: aria-expanded 属性

aria-expanded 属性被设置在一个元素上,用于指示一个控件是展开还是折叠状态,以及受控元素是否可见或隐藏。

描述

有几种可以展开和折叠的组件,包括菜单、对话框和手风琴面板。这些对象中的每一个,反过来,都有一个控制其打开和关闭的交互式元素。aria-expanded 属性应用于这个可聚焦的、交互式的控件,该控件用于切换对象的可见性。

例如,aria-expanded 被应用于 DOM 树中的父项,以指示其子分支是否显示。父项也控制着关联子分支的可见性。

有两种声明可以应用于控制另一个对象可见性的对象:aria-controls,或者 aria-owns 结合 aria-expandedaria-controlsaria-owns 指示了控制元素和受控元素之间的关系。aria-expanded 则指示辅助技术,受控元素是展开还是折叠状态。

在拥有可展开分组容器的元素上使用 aria-owns 属性。如果可展开和可折叠的分组容器不被具有 aria-expanded 属性的元素拥有,则使用 aria-controls 属性来引用分组容器。

按钮

用于切换组件的按钮应将 aria-controls 设置为被切换组件的 id,并将 aria-expanded 设置为组件的当前状态。

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

当组件可见时,控制对象通过设置 aria-expanded="true" 来传递该信息。控制对象的无障碍名称应反映此更改。

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

当显示 menu 时,用于切换该菜单可见性的按钮对象被设置为 aria-expanded="true"。当菜单隐藏时,可以省略 aria-expanded。如果指定了菜单隐藏时的状态,应设置为 aria-expanded="false"。当子菜单不可见时,其父 menuitem 具有 aria-expanded 属性。当子菜单可见时,应设置为 true

Combobox

默认情况下,某些角色是隐藏或折叠的,而其他角色是打开或展开的。具有 combobox 角色的元素,aria-expanded 的默认值为 false。当 combobox 弹出窗口不可见时,具有 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 属性的存在表示了控制关系。避免将其应用于不控制其他元素展开状态的元素。

Treeitems

每个具有 treeitem 角色的元素,如果作为父节点,在节点处于关闭状态时设置为 aria-expanded="false",在节点处于打开状态时设置为 aria-expanded="true"。叶子节点(没有子节点的节点)不应具有 aria-expanded 属性,因为如果拥有该属性,它们将被错误地描述为辅助技术中的父节点。

Rows

treegrid 中的父行是一个可以展开或折叠以显示或隐藏表格或网格中子行集的行。每个父行将 aria-expanded 状态设置在行元素本身或行中的一个单元格上。当子行隐藏时,设置为 aria-expanded="false"。当子行显示时,设置为 aria-expanded="true"。不控制子行显示的行不应包含 aria-expanded 属性,因为包含该属性会错误地将这些行定义为父行。

false

此元素拥有或控制的分组元素已折叠。

true

此元素拥有或控制的分组元素已展开。

undefined(默认值)

该元素不拥有或控制任何可展开的分组元素。

相关接口

Element.ariaExpanded

Element 接口的一部分 ariaExpanded 属性,反映了 aria-expanded 属性的值。

ElementInternals.ariaExpanded

ElementInternals 接口的一部分 ariaExpanded 属性,反映了 aria-expanded 属性的值。

相关角色

用于角色

继承至角色

规范

规范
无障碍富互联网应用程序 (WAI-ARIA)
# aria-expanded

另见