Question

在我的网站上，我的手风琴具有以下结构（由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)

Answer 1

执行的元素是应该在其上设置aria-expanded的元素。确保您不要在展开的元素上设置aria-expanded。

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

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

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

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

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

1 个答案: