Alert

Présentation

Messages d'alerte courants : information, succès, alerte, danger/erreur. Les blocs d'alerte sont dotés d'une classe commune alert et d'une classe spécifique (ex. alert-success).

L'attribut role="alert" déclenche sa lecture immédiate au chargement de la page par les aides techniques. Pour cette raison, nous choisissons de ne pas mettre ce rôle sur les messages d'information.

Si vous utilisez ce composant pour afficher des messages de façon dynamique (apparition suite à l'activation d'un bouton ou la validation d'un formulaire sans rechargement de page par exemple) et que vous souhaitez faire vocaliser le contenu de ces messages par les lecteurs d'écran sans devoir déplacer le focus sur le message il faudra :

  • Ajouter un role="alert" sur la <div class="alert alert-xxx">.
  • Prévoir que la <div class="alert alert-xxx" role="alert"> soit présente dans le code source par défaut mais vide.
  • Générer le message à l'intérieur via javascript lorsque nécessaire.

Note : ce module est issu du framework Bootstrap.

Exemples d'utilisation

<div class="alert alert-success" role="alert">
  <p class="alert-content"><strong>Bravo ! </strong>Votre compte a bien été créé.</p>
</div>

<div class="alert alert-info">
  <p class="alert-content"><strong>Votre messagerie : </strong>Vous avez 123 nouveaux messages privés. <a href="#">Accédez à votre boîte de messages</a>.</p>
</div>

<div class="alert alert-warning" role="alert">
  <p class="alert-content"><strong>Attention ! </strong> Votre porte-documents atteindra bientôt la limite autorisée.</p>
</div>

<div class="alert alert-danger" role="alert">
  <div class="alert-content">
    <p><strong>Erreur :-(</strong></p>
    <p>Le formulaire est incomplet, il contient 2 erreur(s) : </p>
    <ul>
      <li>L’adresse électronique est incorrecte.</li>
      <li>Le mot de passe est incorrect.</li>
    </ul>
  </div>
</div>

Démo

Votre messagerie : Vous avez 123 nouveaux messages privés. Accédez à votre boîte de messages.