即使元素展开，aria-expanded 也会显示为 false答案

【问题标题】：The aria-expanded shows false even when the element is expanded即使元素展开，aria-expanded 也会显示为 false
【发布时间】：2022-06-20 05:21:25
【问题描述】：

我想知道为什么点击时咏叹调没有展开。

<div 
    class="tooltip filter-tooltip" 
    tabindex="0" 
    role="button" 
    aria-label="Vaccine Brand More Information" 
    aria-expanded="false" 
    aria-controls="filter_dialog"
\>

【问题讨论】：

How do I format my posts using Markdown or HTML?
你在说什么？ Aria 不会向您的网站添加交互，它用于定义浏览器的可访问性指南。更改 aria 中的值取决于开发人员。你甚至期望会/应该发生什么？

标签： javascript html css web wai-aria

【解决方案1】：

该属性不会自行更改其值。您需要在脚本中添加一些步骤，当您单击要展开的元素时将属性更改为“true”，当您再次单击以将其关闭时更改为“false”。

【讨论】：

【解决方案2】：

ARIA 是一组属性，定义了使残障人士更容易访问 Web 内容和 Web 应用程序的方法。

Aria 展开

aria-expanded 属性设置在元素上以指示控件是展开还是折叠，以及它的子元素是显示还是隐藏。

所以你是那个应该根据内容是否展开来更改该值的人。

Aria 拥有

有两个声明可以应用于控制另一个对象的可见性的对象：aria-controls，或aria-owns 与aria-expanded 结合使用。

如果一个元素在视觉上、功能上或上下文上看起来“拥有”一个元素（成为该元素的祖先），但实际上并不是 DOM 中该元素的祖先，则包含 aria-owns 以创建该关系。

所以如果你要使用aria-expanded，你还需要添加aria-owns，其中包括孩子的id。

<div 
  class="tooltip filter-tooltip" 
  tabindex="0" 
  role="button" 
  aria-label="Vaccine Brand More Information" 
  aria-expanded="false" 
  aria-controls="filter_dialog"
  aria-owns="children"
\>
<div id="children"> 
  ...
</div>

【讨论】：