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 個搜索結果”等。