移除组件时强制屏幕阅读器阅读

Question

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

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 放在不存在的元素上。

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

  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 属性。