Aria-live 和显示/隐藏表格

Question

我有一个 Angular 14 应用程序，我在其中显示一些内容。 有一个按钮可以将其置于“编辑模式”，在其中我隐藏内容并显示表单。 当用户编辑表单并单击“完成”时，表单被隐藏并显示更新的内容。

这很好用，但我正在努力使其易于访问。 我在表格的部分添加了一个aria-live ，当它显示时，整个表格会在 Mac 上使用 VoiceOver 大声读出，但你不知道它是一个表格。 不过，您可以选择字段并编辑表单，然后单击“完成”，表单就会消失。

但是，我如何让没有视力的用户知道 (1) 表单出现了，然后 (2) 表单消失了，而常规内容又重新出现了？

我做了一个精简的Stackblitz来说明。

基本上就是这个 HTML：

<div class="container">
  <div class="row">
    <div class="col">
      <div *ngIf="!showForm" aria-live="polite">
        <h1>
          Hello {{ myForm.controls.fname.value }}
          {{ myForm.controls.lname.value }}
        </h1>

        <button class="btn btn-secondary" type="button" (click)="onEditForm()">
          Edit Greeting
        </button>
      </div>

      <form [formGroup]="myForm" *ngIf="showForm" aria-live="polite">
        <h3 class="sr-only">Edit Greeting Form</h3>

        <div class="form-group mb-4">
          <label for="fname">First Name</label>
          <input
            type="text"
            id="fname"
            formControlName="fname"
            class="form-control"
          />
        </div>

        <div class="form-group mb-4">
          <label for="lname">Last Name</label>
          <input
            type="text"
            id="lname"
            formControlName="lname"
            class="form-control"
          />
        </div>

        <button type="button" class="btn btn-primary" (click)="onDoneForm()">
          DONE
        </button>
      </form>
    </div>
  </div>
</div>

Answer 1

ARIA 活动区域不太适合包含大量文本或其他内容的元素。 屏幕阅读器将一次性阅读所有内容，而且对于长时间的阅读，这很少是最好的做法，因为用户无法中断或暂停阅读，或者如果他/她这样做了，rest 有点迷路了。

对于 forms 来说，更好的做法是将焦点放在第一个输入字段上。 将读取第一个 label 以及字段类型，因此用户将知道他/她必须输入一些信息，然后将按 Tab 到 go 到下一个字段，依此类推。

除此之外，您可以实时使用 ARIA，但不能在显示的表单或内容上使用。 ARIA live 的最佳用途是显示短字符串，例如“显示表单”、“正在加载内容”、“您的请求已提交”、“有 12 个搜索结果”等。