【问题标题】: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"
\>

【问题讨论】:

  • 你在说什么? Aria 不会向您的网站添加交互,它用于定义浏览器的可访问性指南。更改 aria 中的值取决于开发人员。你甚至期望会/应该发生什么?

标签: javascript html css web wai-aria


【解决方案1】:

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

【讨论】:

    【解决方案2】:

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

    Aria 展开

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

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

    Aria 拥有

    有两个声明可以应用于控制另一个对象的可见性的对象:aria-controls,或aria-ownsaria-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> 
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2023-01-16
      • 1970-01-01
      • 2015-03-01
      • 1970-01-01
      • 2018-11-27
      • 2017-05-30
      • 2019-02-10
      • 1970-01-01
      相关资源
      最近更新 更多