如何将属性 aria-expanded=true/false 添加到元素答案

【问题标题】：How to ad the attribute aria-expanded=true/false to an element如何将属性 aria-expanded=true/false 添加到元素
【发布时间】：2018-11-19 11:54:29
【问题描述】：

在我的网站上，我有一个具有以下结构的手风琴（由 ckeditor-accordion 生成）

<dl>
  <dt>title 1</dt>
 <dd>content 1</dd>
 <dt class="active">title 2</dt>
 <dd>content 2</dd>
</dl>

结果应该是dt-element有class="active"时添加属性"aria-expanded=true"，否则默认为"aria-expanded=false"。

我想是这样的

document.getElementByTagName("dt").setAttribute("aria-expanded", false)

【问题讨论】：

标签： javascript wai-aria

【解决方案1】：

进行展开/折叠的元素是应该在其上设置aria-expanded 的元素。确保不要在展开的元素上设置aria-expanded。

因此，在您的情况下，<dt> 应该有 aria-expanded。你是正确的，当部分展开时值应该是true，当它折叠时值应该是false。 <dd> 是保存内容的容器。它应该不有aria-expanded。

我知道您的代码 sn-p 只是对您的想法的简要总结。希望您的真实代码设置了更多属性。例如，具有aria-expanded 的元素应该是<button> 并包含在标题中。如果您使用定义列表 (<dl>) 作为结构，则需要在 <dl> 上添加 role="presentation"，以便屏幕阅读器不会宣布存在列表。

“WAI-ARIA Authoring Practices 1.1”有一个很好的手风琴部分。

要实际更改aria-expanded 属性的值，您需要执行与通过javascript 更改任何其他属性相同的操作。您使用setAttribute() 的建议很好。

【讨论】：