时间戳

首页 > 解决方案 > 在 Angular 中单击按钮后，让 NVDA 屏幕阅读器提醒用户的最佳方法是什么？

html - 在 Angular 中单击按钮后，让 NVDA 屏幕阅读器提醒用户的最佳方法是什么？

问题描述

我在 Angular 中有一个应用程序。在其中一个屏幕中，我可以搜索一些数据，根据这些数据过滤数据。有一个重置按钮可以清除过滤器。我想在 NVDA 屏幕阅读器中提醒用户单击重置按钮后搜索已被重置。

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

<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 阅读的消息。但是屏幕阅读器不应检测到此元素。所以我设置不显示。

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

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 中。如果我使用制表符和箭头键滚动页面，屏幕阅读器会检测到此元素并再次阅读。（我希望它仅在单击重置按钮时读取）。

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

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';

}

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

标签： htmlcssangularnvda

解决方案

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

<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);
}

推荐阅读