s Guías Prácticas de Código Accesible
Escudo de la República de Colombia

Notificaciones de Usuario

Proveer al usuario una retroalimentación de los resultados obtenidos de su presentación del formulario, sin importar si este está bien o no. Esta retroalimentación debe de hacerse cerca del control de formulario que el usuario está completando.

Las notificaciones deben ser concisas y claras. En particular, los mensajes de error deben ser fáciles de entender y deben proporcionar instrucciones sencillas sobre cómo se pueden resolver. Los mensajes de éxito también son importantes para confirmar la finalización de la tarea.


Notificaciones usando encabezados principales <h1> y <h2>
Fragmento de Código: Error
<h1> Error – Dirección</h1>
Fragmento de Código: Éxito 
<h1>Registro Exitoso</h1>

Notificaciones usando <tittle>
Fragmento de Código: Error
<title>Error – Dirección</title>
Fragmento de Código: Éxito 
<title>Registro Exitoso</title>

Notificaciones usando diálogos
Ejemplo:
Fragmento de Código: HTML
<button type="button" id="alertconfirm">Guardar</button>
Fragmento de Código: JavaScript
document.getElementById('alertconfirm')
  .addEventListener('click', function() {
    /* [… code saving data …] */
    alert('Gracias por completar el formulario de registro');
  });

Notificaciones usando listas de errores
Fragmento de Código: 
<label for="firstname">Primer Nombre:</label>
<input type="text" id="firstname" aria-describedby="firstname_error">
Ejemplo:
Fragmento de Código: 
<div role="alert">
  <h4>Existen 2 errores en el formulario</h4>
  <ul>
    <li>
      <a href="#firstname" id="firstname_error">
        El campo primer nombre no puede estar vacio.
      </a>
    </li>
    <li>
      <a href="#birthdate" id="birthdate_error">
        Los datos tienen un formato errado, debe ser algo similar a 18/11/2016.
      </a>
    </li>
  </ul>
</div>

Retroalimentación directa después de enviar
Ejemplo:
✓
Use el formato MM/YYYY.
Fragmento de Código: HTML
<div class="success">
  <label for="username">
    <strong>OK:</strong> Nombre de Usuario:
  </label>
  <input type="text" name="username"
    id="username" value="lflondonor"
    aria-describedby="userDesc">
  <span id="userDesc">✓</span>
</div>
<div class="error">
  <label for="expire">
    <strong>Error:</strong>
    Fecha de Expedición:
  </label>
  <input type="text" name="expire"
    id="expire" value="08.1994"
    aria-describedby="expDesc">
    <span id="expDesc">Use the format MM/YYYY.</span>
</div>
<div>
  <button type="submit">Submit</button>
</div>
Fragmento de Código: CSS
.error   { color: #900; }
.success { color: #007a00; }
.error   input { border: 3px solid #900; }
.success input { border: 3px solid #007a00; }

Retroalimentación directa durante el ingreso de los datos
Ejemplo:
Fragmento de Código: HTML
<div>
  <label for="username">Nombre de Usuario:</label>
  <input type="text" name="username" id="username">
  <span id="username_feedback" aria-live="polite"></span>
</div>
Fragmento de Código: JavaScript
document.getElementById('username').addEventListener('keyup', function(){
  function setError(el, msg) {
    el.parentNode.querySelector('strong').innerHTML = "Error:";
    el.parentNode.className='error';
    el.parentNode.querySelector('span').innerHTML = msg;
  }
  function setSuccess(el) {
    el.parentNode.querySelector('strong').innerHTML = "OK:";
    el.parentNode.className='success';
    el.parentNode.querySelector('span').innerHTML = "&check;";
  }
  var val = this.value;
  if (val !== "") {
    if (taken_usernames.indexOf(val.trim())+1) {
      setError(this, '&cross; Sorry, this username is taken.');
    } else {
      setSuccess(this, '&check; You can use this username.');
    }
  } else {
    document.getElementById('username_feedback').innerHTML = '';
    document.getElementById('username_feedback')
      .parentNode.className = '';
    document.querySelector('[for="username"] strong').innerHTML = '';
  }
});

Example:

Fragmento de Código: HTML
<label for="password">Contraseña:</label>
<input type="text" name="password" id="password">
<span id="passwordmeter"><span></span></span>
<span id="passwordmessage" aria-live="polite"></span>
Fragmento de Código: CSS
#passwordmeter {
  display:inline-block;
  width:125px;
  height: 20px;
  border: 1px solid #666;
  vertical-align:middle;
}
#passwordmeter span {
  display:inline-block;
  height:1em;
  background-color: gray;
  width:25px;
  height: 20px;
}
Fragmento de Código: JavaScript
document.getElementById('password').addEventListener('keyup',
    function(){
      // (1) Select the password meter and message elements.
     var meter = document.querySelector('#passwordmeter span');
      var msg = document.getElementById('passwordmessage');

      // (2) Calculate the strength of the password.
     var pw = get_pw_strength(this.value);

      // (3) Set the with of the password meter to a multiple of the score.
     meter.style.width = (pw.score+1) * 25 + 'px';

      /* (4) Set the color of the meter to
             a) red if the score < 3
             b) yellow if the score = 3
             c) green if the score = 4

        (5) Change the text of the password message element accordingly. */
        if (pw.score == 0) {
          meter.style.backgroundColor = 'red';
          msg.innerHTML = '<strong>Really Weak</strong> Password';
        } else if (pw.score < 3) {
          meter.style.backgroundColor = 'red';
          msg.innerHTML = '<strong>Weak</strong> Password (cracked in ' + pw.crack_time_display + ')';
        } else if (pw.score == 3) {
          meter.style.backgroundColor = 'yellow';
          msg.innerHTML = '<strong>Good</strong> Password (cracked in ' + pw.crack_time_display + ')';
        } else {
          meter.style.backgroundColor = 'green';
          msg.innerHTML = '<strong>Strong</strong> Password (cracked in ' + pw.crack_time_display + ')';
        }

      /* (6) If the input is empty, there is no text output
             and the color of the meter is set to gray. */
      if (this.value == "") {
        meter.style.backgroundColor = 'gray';
        msg.innerHTML = ' ';
      }
  });

Ejemplo:
Fragmento de Código: 
<div>
  <label for="expire"><strong></strong> Fecha de Expedición:</label>
  <input type="text" name="expire" id="expire" value="08.2012" aria-describedby="expDesc3">
  <span id="expDesc3" aria-live="assertive"></span>
</div>