ARIA21Marcar los campos con errores con aria-invalid

Usar aria-invalid en campos obligatorios

El atributo aria-invalid se usa en los campos obligatorios que están vacíos cuando se envía el formulario. Un mensaje situado encima del formulario indica al usuario que hay campos de formulario que deben completarse.

HTML:

<form name="signup" id="signup" method="post" action="">
  <p id="errors" aria-live="assertive"></p>
  <div>
    <label for="first">First Name (required)</label>
    <input aria-invalid="false" autocomplete="given-name" id="first" name="first" type="text">
  </div>
  <div>
    <label for="last">Last Name (required)</label>
    <input aria-invalid="false" autocomplete="family-name" id="last" name="last" type="text">
  </div>
  <div>
    <label for="email">Email (required)</label>
    <input aria-invalid="false" autocomplete="email" id="email" name="email" type="text">
  </div>
  <div>
    <button id="button" type="submit">Sign Up</button>
  </div>
</form>

CSS:

label.failed {
  background:#CE0000;
  color:#fff;
}

JavaScript:

Estas son las dos funciones JavaScript que establecen el atributo aria-invalid="true" y después crean el mensaje de error de validación:

const requiredFields = ['first', 'last', 'email'];
let errorCount = 0;
requiredFields.forEach(fieldId => {
  const field = document.getElementById(fieldId);
  if (field.value.trim() === '') {
    field.setAttribute('aria-invalid', 'true');
    document.querySelector(`label[for='${fieldId}']`).classList.add('failed');
    errorCount++;
  }
});
if (errorCount > 0) {
  errText.textContent = `Please complete all ${errorCount} required ${errorCount === 1 ? 'field' : 'fields'} and retry`;
}

Ejemplo funcional: usar aria-invalid en campos obligatorios.

Identificar errores en el formato de los datos

En este ejemplo, aria-invalid y aria-describedby se usan conjuntamente para indicar un error cuando el número de identificación personal (PIN), la dirección de correo electrónico o la fecha de inicio no tienen el formato esperado. El mensaje de error se asocia al campo mediante aria-describedby, y aria-invalid facilita encontrar por software los campos con errores.

Características

• Añade un atributo aria-invalid="true" a un campo de formulario si faltan los datos introducidos o no tienen el formato esperado:
  • El PIN contiene menos de 4 caracteres;
  • La dirección de correo electrónico no cumple el formato requerido;
  • El apellido debe contener al menos dos letras;
  • La fecha de inicio de la póliza es anterior a la fecha de hoy.
• Muestra un mensaje de error que se conecta por software con el campo de formulario correspondiente mediante el atributo aria-describedby.

HTML:

<div class="control">
  <label for="pin4">PIN * (4 digits)</label> 
  <input id="pin4" name="pin4" pattern="\d{4}" size="4" type="text" aria-describedby="pin4-errormsg" aria-invalid="true" class="error">
  <span class="errtext" id="pin4-errormsg">Error: PIN is required</span>
</div>

CSS:

.error {
  border: #CE0000 thin solid;
}
.errtext {
  background: #EEEEFF url('error-icon.svg') no-repeat right 0.25em center;
  color:#CE0000;
  display:block;
  margin-bottom: 1em;
  max-width: fit-content;
  padding: .25em 1.6em .25em .25em;
}

JavaScript:

Se necesita JavaScript para añadir los atributos aria-invalid, aria-describedby y class, así como para añadir el texto del error. Esta función es la parte relevante del script de validación completo:

function addFieldError(field, message) {
  const errId = field.id + '-errormsg';
  const errDiv = document.createElement('div');
  errDiv.className = 'errtext';
  errDiv.id = errId;
  errDiv.textContent = message;
  field.parentNode.appendChild(errDiv);
  field.setAttribute('aria-describedby', errId);
  field.setAttribute('aria-invalid', 'true');
  field.classList.add('error');
}

Ejemplo funcional: identificar errores en el formato de los datos.