如何使 Ionic Toast 与屏幕阅读器更兼容答案

【问题标题】：How to make Ionic Toast more compatible with Screen Reader如何使 Ionic Toast 与屏幕阅读器更兼容
【发布时间】：2020-08-17 21:54:48
【问题描述】：

我正在尝试使我的应用程序更兼容屏幕阅读器。我使用 Google TalkBack。我目前的障碍是在使用 Toasts 时发生的。我创建了一个按钮来创建和呈现一个简单的吐司。由于屏幕阅读器完全忽略了它们，我在 DOM 中添加了以下属性：

role=‘警报’
aria-live='root'
aria-label=‘消息’

出乎我的意料，当我点击按钮时，屏幕阅读器会两次描述按钮，然后是吐司。这只会发生一次。如果我再次单击该按钮，则读取元素的顺序是我希望它从头开始的顺序。我的猜测是焦点会跳回按钮（一次），因此会被读取两次。

有谁知道我该如何解决这个问题？是什么导致焦点返回按钮？

【问题讨论】：

标签： android ionic-framework accessibility

【解决方案1】：

在测试了几个解决方案后，我对以下内容感到满意：

 private async createIosToast(message: string, duration: number) {
    const toast = await this.toastController.create({
      message,
      duration,
      color: 'primary'
    });

    toast.setAttribute('role', 'alert');
    toast.setAttribute('id', 'toast');

    const toastElement = document.getElementById('toast') as HTMLElement;
    const activeElement = this.correctActiveElement.getCorrectActiveElement();

    // set focus on toast
    toast.addEventListener('ionToastWillPresent', async () => {
      this.focusService.focus(toastElement);
    });

    // reset focus
    toast.onDidDismiss().then(async () => {
      console.log(activeElement);
      this.focusService.focus(activeElement);
    }, error => {
      console.log(error);
    });

    return toast;
  }

以下方法在同时为 android 和 iOS 开发时很重要。由于 focus-method 设置了 tabindex，因此该方法避免了将其应用于错误的元素。否则，如果元素有一个 shadow-root，它会被聚焦两次（仅在 android 上）。

  getCorrectActiveElement(): HTMLElement {
    if (this.platform.is('android') && document.activeElement.shadowRoot != null) {
      return document.activeElement.shadowRoot.childNodes[0] as HTMLElement;
    } else {
      return document.activeElement as HTMLElement;
    }
  }

这个方法只是设置焦点并应用一个tabindex：

  public focus(element: HTMLElement): void {
    setTimeout(() => {
      element.setAttribute('tabindex', '0');
      element.focus();
    }, 0);
  }

结论：使用这段代码，我最大程度地减少了我的问题。在 android 上会有一些我无法消除的不必要的振动。它们是由焦点跳回 web 视图引起的。在 iOS 上，toast 将被读取一次，然后被中断，然后完全读取。

在 Google Pixel 和 iPhone X 上测试。

【讨论】：