防止屏幕阅读器读取 aria-live 容器中某些区域的更改

问题描述

我有一个索引页面，用户可以在其中过滤结果，这些结果的外部容器有一个 aria-live 属性，以便读取此容器中的更改（希望从一开始就没有错）。到目前为止，一切都很好。

问题是：目前这些容器有一个 div.button-bar，通过 CSS 在 mouSEOver 上显示。
一个简化的示例如下所示：

<div aria-live="polite">
    <article>
        <h2>Some headline</h2>
        <!--- some text and icons -->
        <div class="button-bar">
            <button>Edit</button>
            <button>Delete</button>
            <button>View</button>
        </div>
    </article>
</div>

对于键盘支持，我们更改了当前行为并添加了一个 JS 事件，该事件将通过在文章中的某些内容获得焦点时添加一个类来显示 button-bar。但是屏幕阅读器会立即读取这些按钮（由于 aria-live）而不是标题和图标。 我不确定在我的 JS 中包含 setTimeout 是否可以正确解决问题。是否有一个属性可以让屏幕阅读器忽略我的 button-bar 中的更改，但仍会在焦点上阅读这些按钮？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）