Code Library of Accessibility Examples
Beta. Feedback welcome!

Alert

Alert

Overview

An alert is a special type of ARIA live region. Screen readers will announce the text inside the alert, without moving the focus to the alert message. Alerts are usually styled to visually stand out from the rest of the content, to make them obvious when they appear.


Turn on a screen reader to experience this example in action.

HTML Source Code

<!---
This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/
-->
<div>
    <button type="button" id="alert-trigger" class="primary" >Show alert</button>
    <button type="button" id="alert-success" class="primary" >Show success alert</button>
    <button type="button" id="alert-warn" class="primary" >Show warning alert</button>
    <button type="button" id="alert-error" class="primary" >Show error alert</button>
    <button type="button" id="alert-clear">Clear Alert</button>

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

JavaScript Source Code

//Language object to be modified as per the language
var langText = {
    "successMessage" : "This is a success alert message.",
    "defaultMessage" : "This is a simple alert message.",
    "warningMessage" : "This is a warning alert message.",
    "errorMessage"   : "This is an error alert message.",
    "alertClearedMessage" : "Alert cleared.",    
}

//This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/

window.addEventListener('load', function () {
    document.getElementById('alert-trigger').addEventListener('click', showSimpleAlert);
    document.getElementById('alert-success').addEventListener('click', showSuccessAlert);
    document.getElementById('alert-warn').addEventListener('click', showWarningAlert);
    document.getElementById('alert-error').addEventListener('click', showErrorAlert);
    document.getElementById('alert-clear').addEventListener('click', clearAlert);
});

function showSimpleAlert()
{
    showAlert(langText["defaultMessage"]);
    
}
function showSuccessAlert()
{
    var icon = '<i class="fa-solid fa-circle-check icon success"></i>';
    var message = icon+ " " + langText["successMessage"];
    showAlert(message, "#eaf7e4");
}

function showWarningAlert()
{
    var icon = '<i class="fa-solid fa-circle-xmark icon warning"></i>';
    var message = icon+ " " + langText["warningMessage"];
    showAlert(message, "#fdedd5");
}

function showErrorAlert()
{
    var icon = '<i class="fa-solid fa-circle-xmark icon error"></i>';
    var message = icon+ " " + langText["errorMessage"];
    showAlert(message, "#ffe2d9");
}

function showAlert(html, bkColor) 
{
    var alert = document.getElementById('alert');
    if(typeof bkColor == "undefined") bkColor = "#eef2f5";
    alert.innerHTML = html;
    alert.style.backgroundColor = bkColor;
}

function clearAlert() 
{
    showAlert(langText["alertClearedMessage"]);
    var alert = document.getElementById('alert');
    setTimeout(function(){ 
        alert.innerHTML = "";
    }, 1000);
}

CSS Source Code

/*
This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/
*/

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

[role="alert"]:empty {
    display: none;
}
button { 
    padding: 7px 12px;
    font-size: 15px;
    margin: 4px;
   }
.icon { font-size: 18px;    }
.success { color: green;    }
.warning {color: darkorange;    }
.error { color: red;    }
.primary {     
    background-color: #0464b3;
    color: white;
}

Copy and Paste Full Page Example