ARIA19Usar la función (role) alert de ARIA o regiones activas para identificar errores

Inyectar mensajes de error en un contenedor con role=alert ya presente en el DOM

El siguiente ejemplo usa role=alert, que equivale a usar aria-live=assertive.

En el ejemplo hay un elemento contenedor de mensajes de error vacío con aria-atomic=true y una propiedad aria-live o una función alert, presente en el DOM al cargar la página. El contenedor de errores debe estar presente en el DOM al cargar la página para que la mayoría de los lectores de pantalla lean el mensaje de error. aria-atomic=true es necesario para que VoiceOver en iOS lea los mensajes de error después de más de un envío no válido.

Se usa JavaScript para comprobar si los campos de entrada están vacíos al enviar el formulario y, en ese caso, inyectar los mensajes de error en los contenedores de región activa. Cada vez que se intenta un nuevo envío, los mensajes de error anteriores se eliminan del contenedor y se inyectan los nuevos.

// Get the form element
const form = document.getElementById('signup');
// Listen for when the form is submitted
form.addEventListener('submit', function(event) {
// Stop the form from actually submitting (so we can check it first)
event.preventDefault();
// Get references to the input fields
const firstNameInput = document.getElementById('first');
const lastNameInput = document.getElementById('last');
const emailInput = document.getElementById('email');
// Get the element where we'll show error messages
const errorsContainer = document.getElementById('errors');
// Create an empty array to collect error messages
const errorMessages = [];
// Check if first name is empty
if (firstNameInput.value === '') {
  errorMessages.push('<li>Please enter your first name.</li>');
}
// Check if last name is empty
if (lastNameInput.value === '') {
  errorMessages.push('<li>Please enter your last name.</li>');
}
// Check if email is empty
if (emailInput.value === '') {
  errorMessages.push('<li>Please enter your email address.</li>');
}
// Clear the errors container first
// (This helps screen readers notice when new content appears)
errorsContainer.innerHTML = '';
// Wait 500 milliseconds, then show the errors
setTimeout(function() {
  // If there are any errors, wrap them in a list and display them
  if (errorMessages.length > 0) {
    errorsContainer.innerHTML = '<ul>' + errorMessages.join('') + '</ul>';
  }
}, 500);
});

<form name="signup" id="signup">
  <p id="errors" role="alert" aria-atomic="true"></p>
  <div>
    <label for="first">First Name (required)</label>
    <input autocomplete="given-name" type="text" name="first" id="first">
  </div>
  <div>
    <label for="last">Last Name (required)</label>
    <input autocomplete="family-name" type="text" name="last" id="last">
  </div>
  <div>
    <label for="email">Email (required)</label>
    <input autocomplete="email" type="text" name="email" id="email">
  </div>
  <div>
    <input type="submit" name="button" id="button" value="Submit">
  </div>
 </form>

Ejemplo funcional: Usar role=alert para identificar errores.