Alert adalah sebuah widget yng berfungsi untuk menyampaikan pesan singkat dan penting yang menarik perhatian pengguna tanpa mengganggu kerjaan pengguna.

Alert tidak memerlukan interaksi dengan keyboard.

kode HTML

<div>
 <button id="alert-trigger">Trigger Alert</button>

 <div id="example" role="alert"></div>

 
 <script type="text/template" id="alert-template">
   <p><span lang="da">Hej</span>, hello, <span lang="it">ciao</span>, <span lang="ja">?????</span>, <span lang="ko">??</span></p>
 </script>
</div>

Kode CSS

[role="alert"] {
 padding: 10px;
 border: 2px solid hsl(206, 74%, 54%);
 border-radius: 4px;
 background: hsl(206, 74%, 90%);
}

[role="alert"]:empty {
 display: none;
}

Kode Javascript

window.addEventListener('load', function () {

    var button = document.getElementById('alert-trigger');

    button.addEventListener('click', addAlert);

  });

  function addAlert (event) {
    var example = document.getElementById('example');
    var template = document.getElementById('alert-template').innerHTML;

    example.innerHTML = template;
  }

See the Pen ARIA - alert by minotaurblog (@minotaurblog) on CodePen.

Pengenalan WAI ARIA