Alert Messages
Alerts are commonly used with form submissions.
WAI-ARIA Reference: An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound. It is important to note that, at this time, screen readers do not inform users of alerts that are present on the page before page load completes. [ Source ]
Alert Messages Sample(s):
Informative
Informative alerts are more commonly used in association with providing information .
Note: This is an info alert
This is the informative content associated with the alert.
<div class="c_alert c_alert-info" role="alert">
<p class="c_alert-header">Note: This is an info alert</p>
<p class="c_alert-body">This is the informative content associated with the alert.</p>
</div>Success
Success alerts are more commonly used in association with successful form submissions.
This is a success alert
<div class="c_alert c_alert-success" role="alert">
<svg aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-warning"></use>
</svg>
<p>This is a success alert</p>
</div>Warning
Warning Alerts are more commonly used in association with unsuccessful form submissions.
This is a warning alert
<div class="c_alert c_alert-warning" role="alert">
<svg aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-warning"></use>
</svg>
<p>This is a warning alert</p>
</div>Best Practices
For more information, visit this MDN resource