Aria-live and showing/hiding a form

Steve 0
Viewed 30

I have an Angular 14 app where I display some content. There is a button to put this into "edit mode" wherein I hide the content and show a form. When the user edits the form and clicks "done", the form is hidden and the updated content shows.

This works fine, but I am trying to make this accessible. I added an aria-live to the part with the form and when it is shown the entire form is read out loud using VoiceOver on Mac, but you don't know it's a form. You can tab to the fields and edit the form, though, and then click Done and the form goes away.

However, how do I let unsighted users know that (1) a form has appeared and then (2) the form have disappeared and the regular content has re-appeared?

I have made a stripped down Stackblitz to illustrate.

It's basically this 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>
wai-aria accessibility javascript angular html
1 Answers

ARIA live regions aren't well suited for elements containing a lot of text or other things. The screen reader will read them all at once, and, for long things, it's rarely the best thing to do because the user can't interrupt or pause the read, or if he/she does it, the rest is kind of lost.

A much better thing to do for forms is to put the focus on the first input field. The first label will be read as well as the field type, and so the user will know that he/she has to enter some information, and then will press tab to go to the next field, and so on.

Additionally to that, you can use ARIA live, but not on the form or content shown itself. The best use of ARIA live is for displaying short strings saying "The form is shown", "Content is loading", "Your request has been submitted", "There are 12 search results", etc.

QuentinC0
Related