删除组件时强制屏幕 Reader 读取

Question

我需要屏幕 reader 在删除所有过滤器项目后显示“所有过滤器都已删除”。棘手的部分是：当有源过滤器组件被删除时，我没有其他元素可以将 aria-label 设置为 All filters are removed。我想知道在这种情况下如何强制屏幕 reader 阅读内容？

HTML 例子在这里：

<div *ngIf="activeFilters.length > 0">
    <div class="active-filters" attr.aria-label="{{'List of active filters'}}">
        <h4 class="active-filters-headline">{{'Active filters'}}</h4>
  
    </div>
</div>

当所有筛选项都被删除后，active-filters 组件将不会显示。因为 activeFilters.length 将为 0。所以我不确定如何将 aria-label 放在不存在的元素上。

这是可能引入屏幕 reader 逻辑的打字稿代码：

  ngAfterViewChecked() {
            if (this.interaction && this.interactionDataDelivery) {
                this.interaction = this.interactionDataDelivery = false;
                if (this.activeFilters.length == 0) {
                    //How do I set up the aria-label?
                }
            }
        }

Answer 1

我过去这样做是通过使用 aria-live="assertive" 创建一个元素，使用 some CSS trickery 隐藏它除了屏幕阅读器，然后设置它的 innerHTML。沿着这些线的东西：

const $message = document.createElement('span');
$message.classList.add('visuallyhidden'); // <-- Some method of making sure this element is only seen by screen readers
$message.setAttribute('aria-live', 'assertive');

document.body.appendChild($message);

const speak = function (message) {
    $message.innerHTML = '';
    window.setTimeout(() => {
        $message.innerHTML = message;
    }, 100);
};

您可能还想采取一些措施来确保使用屏幕阅读器的人也无法手动导航到警报消息元素，例如事后清除其内容或控制其 aria-hidden属性。

删除组件时强制屏幕 Reader 读取

Force Screen Reader to Read When A Component Is Removed

javascript

html

angular

accessibility

screen-readers