Alert Dialog Example

Important Note About Use of This Example

Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

The below example of a confirmation prompt demonstrates the design pattern for an alert dialog. It also includes an example of the design pattern for an alert to make comparing the experiences provided by the two patterns easy.

To use this example:

Activate the "discard" button to trigger a confirmation dialog that has the alertdialog role.
- Activating the "yes" button in the confirmation dialog removes the contents of both the "Notes" text area and local storage of the notes.
- Activating the "no" button or pressing escape closes the dialog.
- The "discard" button is disabled if the notes text area does not contain any text.
Activate the "save" button to trigger an alert when the contents of the "Notes" text area is saved to local storage.
- A successful save triggers a short alert to notify the user that the notes have been saved.
- The "save" button is disabled if the user's local storage value is the same as the "Notes" field.
Modify the "notes" text area as needed to enable and disable the discard and save functions.

Note: This example uses code from the modal dialog example to create the behaviors of the alertdialog so referencing that example may be useful.

Similar examples include:

Alert: a basic alert.
Modal Dialog Example: An example demonstrating multiple layers of modal dialogs with both small and large amounts of content.
Date Picker Dialog example: Demonstrates a dialog containing a calendar grid for choosing a date.

Example

Notes

Accessibility Features

The accessible name of the alert dialog is set to its heading ("Confirmation").
The dialog's prompt ("Are you sure...?") is referenced via aria-describedby to ensure that the user is immediately aware of the prompt.
Focus is automatically set to the first focusable element inside the dialog, which is the "No" button. This is the least destructive action, so focusing "No" helps prevent users from accidentally confirming the destructive "Discard" action, which cannot be undone.
When the buttons are disabled, aria-disabled is used instead of the HTML disabled attribute so the buttons will remain in the page Tab sequence. This makes it easier for screen reader users to discover the buttons and discern how the interface works.

Keyboard Support

Key	Function
`Tab`	Moves focus to next focusable element inside the dialog. When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
`Shift + Tab`	Moves focus to previous focusable element inside the dialog. When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
`Escape`	Closes the dialog.
`Command + S`	(Mac only) Save the contents of the notes `textarea` when focused.
`Control + S`	(Windows only) Save the contents of the notes `textarea` when focused.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`alertdialog`		`div`	Identifies the element that serves as the alert dialog container.
	`aria-labelledby="ID_REFERENCE"`	`div`	Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title.
	`aria-describedby="ID_REFERENCE"`	`div`	Gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert dialog.
	`aria-modal="true"`	`div`	Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert).
`alert`		`div`	Identifies the element that serves as the alert notification.
	`aria-disabled="true"`	`button`	Tells assistive technology users the button cannot be activated.

Notes on `aria-modal` and `aria-hidden`

The aria-modal property was introduced in ARIA 1.1. As a relatively new property, screen reader users may experience varying degrees of support for it.
Applying the aria-modal property to the dialog element replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert.
In legacy dialog implementations where aria-hidden is used to make content outside a dialog inert for assistive technology users, it is important that:
- aria-hidden is set to true on each element containing a portion of the inert layer.
- The dialog element is not a descendant of any element that has aria-hidden set to true.

Javascript and CSS Source Code

CSS: dialog.css
Javascript: alertdialog.js, dialog.js, utils.js

HTML Source Code

<label for="notes">
  Notes
</label>
<textarea class="notes"
          name="notes"
          id="notes"
          rows="7">
  This is an example text box, which unsurprisingly contains text. The user is given the option to save this text - which triggers a basic alert - or to discard the text - which triggers an alert dialog that prompts the user for confirmation.
</textarea>
<div class="visually-hidden"
     id="notes_save_status"
     role="alert"></div>
<button type="button" id="notes_save">
  Save
  <svg class="icon spinner"
       viewBox="0 0 32 32"
       aria-hidden="true">
    <path d="M16 32c-4.274 0-8.292-1.664-11.314-4.686s-4.686-7.040-4.686-11.314c0-3.026 0.849-5.973 2.456-8.522 1.563-2.478 3.771-4.48 6.386-5.791l1.344 2.682c-2.126 1.065-3.922 2.693-5.192 4.708-1.305 2.069-1.994 4.462-1.994 6.922 0 7.168 5.832 13 13 13s13-5.832 13-13c0-2.459-0.69-4.853-1.994-6.922-1.271-2.015-3.066-3.643-5.192-4.708l1.344-2.682c2.615 1.31 4.824 3.313 6.386 5.791 1.607 2.549 2.456 5.495 2.456 8.522 0 4.274-1.664 8.292-4.686 11.314s-7.040 4.686-11.314 4.686z"></path>
  </svg>
  <svg class="icon check"
       viewBox="0 0 32 32"
       aria-hidden="true">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
  </svg>
</button>
<button type="button"
        data-textbox="notes"
        id="notes_discard"
        onclick="openAlertDialog('alert_dialog', this)">
  Discard
</button>
<div class="dialog-backdrop no-scroll">
  <div id="alert_dialog"
       role="alertdialog"
       aria-modal="true"
       aria-labelledby="dialog_label"
       aria-describedby="dialog_desc"
       class="hidden">
    <h2 id="dialog_label" class="dialog_label">
      Confirmation
    </h2>
    <div id="dialog_desc" class="dialog_desc">
      <p>
        Are you sure you want to discard all of your notes?
      </p>
    </div>
    <div class="dialog_form_actions">
      <button type="button" onclick="closeDialog(this)">
        No
      </button>
      <button type="button"
              id="notes_confirm"
              onclick="discardInput(this)">
        Yes
      </button>
    </div>
  </div>
</div>