Mejorando la Accesibilidad de Formularios Web

En este curso también aprendí que parágrafo es otra manera de decir párrafo xD En México nunca lo habia escuchado.

todos los front deberia ver este curso!

El método preventDefault () cancela el evento si es cancelable, lo que significa que la acción predeterminada que pertenece al evento no ocurrirá.

hay un atributo que ayuda a validar los formulario, el atributo es require (No recibe ningún valor)
este atributo hace que al momento de hacer un submit, si el input en el que pusiste el require esta vacío, lo enfoca y nos avisa de forma automática que es obligatorio llenarlo.

<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" require />

Este curso es Oro realmente es increible como se debe tener en cuenta la accesibilidad

Termine las validaciones de los otros input:

function Validacion(e) {
  e.preventDefault();

  let Trues = 0;

  const Name = document.getElementById("Nombre").value;
  console.log(Name);

  if (Name === "") {
    document.querySelector("#Nombre__Error").innerHTML =
      "! Para enviar el formulario, debes poner tu nombre";
  } else {
    document.querySelector("#Nombre__Error").style.display = "none";
    Trues++;
  }

  const Correo = document.getElementById("Correo").value;
  console.log(Name);

  if (Correo === "") {
    document.querySelector("#Email__Error").innerHTML =
      "! Para enviar el formulario, debes poner tu correo";
  } else {
    document.querySelector("#Email__Error").style.display = "none";
    Trues++;
  }

  const Mensaje = document.getElementById("Mensaje").value;
  console.log(Name);

  if (Mensaje === "") {
    document.querySelector("#Mensaje__Error").innerHTML =
      "! Para enviar el formulario, debes poner tu Mensaje";
  } else {
    document.querySelector("#Mensaje__Error").style.display = "none";
    Trues++;
  }

  if (Trues === 3) {
    showNotification();
  }
}

Si todo esta en blanco muestra el mensaje, a medida que va llenando pero siguen campos vacios oculta el mensaje a los que ya lleno y al enviar hace el reset();

El atributo de “aria-required” se lo colocas al input y para las personas usando lectores de pantalla, al no llenar un campo, el foco va a ese campo que no se llenó y le dice al usuario qué campo es y que es obligatorio

Para los input del correo y del mensaje:

<input type="text" aria-label="Correo" required/>
<input type="text" aria-label="Caja de texto para mensaje" required/>

Para manejar todos los span de la misma manera en el CSS:

.span-error {
  color: var(--blanco);
  font-family: var(--secondary-font);
}

Y en JS:

function validateForm(e) {
  e.preventDefault();
  const nameField = document.getElementById('name')
  if (nameField.value === '') {
    document.getElementById('name-error').innerHTML = '¡El nombre no puede estar vacío!'
    document.getElementById('email-error').innerHTML = '¡El correo no puede estar vacío!'
    document.getElementById('message-error').innerHTML = '¡El mensaje no puede estar vacío!'
  }else{
    showNotification()
  }
}

Se que anteriormente se dijo que no se debe expresar significado con color, pero ese mensaje de validación en blanco me descoloca completamente.
¿Habrá alguna manera de hacer que si parezca un mensaje de error y no un texto cualquiera?

Estoy teniendo un problema con el preventDefault y es que también previene el mensaje de error cuando le colocas el atributo “required” a un input y la persona no introduce nada ahí.
.
El preventDefault está previniendo que la pagina no se refresque pero también está previniendo que se muestre ese mensaje
.
Alguien sabe como resolverlo?

Gracias profesora, considero que sería muy bueno hacer aún más accesible su aportación.
Pudiéramos detectar el error y mandarlo directamente el Input correspondiente y al momento de enviarlo y que todo sea correcto, enviar el foco al mensaje de enviado, que yo lo situaría debajo del formulario, para yo como usuario saber siempre que lo hice bien, por que quizá el tiempo de espera del mensaje es muy corto.

Me sorprende su pronunciación en ingles 😮

Me gustó mucho como implementó las notificaciones!

El sitio ha cambiado muchísimo, viendo cómo empezó! 😮

Cuando tengan un formulario que traiga información de internet, sería buena idea informarle a la persona que espere mientras carga la información 😄

Validando un formulario ayudamos a nuestros usuarios a entender el formulario y les brindamos instrucciones de que requerimos de ellos en ese momento, si cometen errores les comunicamos el error y les damos una opción de corregirlos.

Si quieren controlar el valor de los inputs de otra forma:

$form.addEventListener('submit', e => {
  e.preventDefault();
  let list = [];
  list.push(e.target.name.value);
  list.push(e.target.email.value);
  list.push(e.target.content.value);
  console.log(list);
});

If you want, leave a message with this form.