Modals

Axe will throw a critical error: "ARIA dialog and alertdialog nodes should have an accessible name". The ion-modal has a role of dialog and needs an accessible name to describe it.

Before

  <ion-modal trigger="open-modal">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-title>Welcome</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
...
      </ion-content>
    </ng-template>
  </ion-modal>

In the above example the logical choice for an accessible name would be the ion-title of "Welcome". We can associate the modal with this by setting the aria-labelled attribute and giving the ion-title an id:

After

  <ion-modal aria-labelledby="modal-title" trigger="open-modal">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-title id="modal-title">Welcome</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
...
      </ion-content>
    </ng-template>
  </ion-modal>

note

This technique can be used with Ionic Framework v6.2.4 and above.