A11y notifications #a11y #html #js

notifications.html

<!-- https://www.w3.org/WAI/tutorials/forms/notifications/ -->

<!-- Use notifications to provide user feedback after a user action -->

<!-- 1. Using main heading -->
<h1>3 Errors - Billing Address</h1>
<h1>Thank you for submitting your order.</h1>

<!-- 2. Using page title -->
<title>3 Errors - Billing Address</title>

<!-- 3. Using dialogs (js alert, or custom dialog) -->
<button type="button" id="alertconfirm">Save</button>
<script>
  document
    .getElementById("alertconfirm")
    .addEventListener("click", function () {
      /* [… code saving data …] */
      alert("Thanks for submitting the form!");
    });
</script>

<!-- 4. Listing errors -->
<div role="alert">
  <h4>There are 2 errors in this form</h4>
  <ul>
    <li>
      <a href="#firstname" id="firstname_error">
        The First name field is empty; it is a required field and must be filled
        in.
      </a>
    </li>
    <li>
      <a href="#birthdate" id="birthdate_error">
        The Date field is in the wrong format; it should be similar to
        17/09/2013 (use a / to separate day, month, and year).
      </a>
    </li>
  </ul>
</div>
<!-- Associate input with specific error -->
<label for="firstname">First Name:</label>
<input type="text" id="firstname" aria-describedby="firstname_error">

<!-- Inline feedback can be useful in addition to notifications -->

<!-- 1. After submit -->
<!-- Validate fields after clicking submit button -->

<!-- 2. during typing -->
<!-- Validate fields during typing -->