在 Angular 中单击按钮后，使 NVDA 屏幕 reader 提醒用户的最佳方法是什么？

Question

我在 Angular 有申请。在其中一个屏幕中，我可以搜索一些基于数据过滤的数据。有一个重置按钮可以清除过滤器。我想提醒 NVDA 屏幕中的用户 reader 单击重置按钮后搜索已重置。

我试过下面的方法。但我有一些问题。请帮助或建议一些更好的方法。我将代码简化如下。

<div>
    <a href="javascript:void(0);" aria-label="Reset search" (click)="resetSearch()"> Reset search
    </a>
    <span id="resetAlert">Search has been reset</span>
</div>

我正在制作一个跨度元素，其中包含我希望 NVDA 读取的消息。但是这个元素不应该被屏幕 reader 检测到。所以我设置显示 none.

单击重置按钮后，将执行以下方法。

resetSearch() {
    // Making display block so that screen reader can find the element in DOM
    document.getElementById('resetAlert').style.display = 'block';

    // Removing existing attribute 
    document.getElementById('resetAlert').removeAttribute('role');

    // Setting role attribute so that screen reader alerts as "alert Search has been reset" 
    document.getElementById('resetAlert').setAttribute('role', 'alert');

}

以上逻辑运行良好。但是随后元素停留在 DOM 中。如果我使用 Tab 键和箭头键滚动页面，屏幕 reader 会检测到该元素并再次读取它。（我希望它只在单击重置按钮时读取）。

我试图将显示更改回 none。但它不起作用。

resetSearch() {
    
    document.getElementById('resetAlert').style.display = 'block';

    
    document.getElementById('resetAlert').removeAttribute('role');

    
    document.getElementById('resetAlert').setAttribute('role', 'alert');


    // This line doesn't work. May be I am missing something. Please help
    document.getElementById('resetAlert').style.display = 'none';

}

帮助我在单击按钮时切换此 span 元素以制作显示块并立即将其更改为显示 none 或者为我的用例建议更好的方法。

Answer 1

我找到了解决办法。我在 span 元素上使用了 aria-live。我保持 span 元素的颜色与父元素的背景颜色相同。我将 span 元素的内容保留为空。单击重置按钮后，内容设置为我希望屏幕 reader 读取的内容。然后我在 2 秒后删除了内容，以便在使用选项卡滚动页面时，屏幕 reader 不会再次读出它。

<span aria-live="polite" id="test" class="landing-page__alert"></span>


resetSearch() {
    document.getElementById('resetAlert').innerHTML = 'Search has been reset';

    setTimeout(() => {
       document.getElementById('resetAlert').innerHTML = '';
    }, 2000);
}

在 Angular 中单击按钮后，使 NVDA 屏幕 reader 提醒用户的最佳方法是什么？

What is the best approach to make NVDA screen reader to alert the user after a button has been clicked in Angular?

html

css

nvda

angular