html - 防止 Screenreader 读取 aria-live 容器中某些区域的更改

Question

我有一个索引页面，用户可以在其中过滤结果，这些结果的外部容器有一个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>

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

标签： htmlcsswai-ariascreen-readersaria-live