Bootstrap 5 Toasts Accessibility
Toasts are the basic push notifications sent to the user its similar to the alert box. To create a basic toast we have to use the class name “toast” inside the toast class we can also add the class “toast-header” and add the header for the toast body, the “toast-body” class can be used. We can also use attributes inside the toast class.
Bootstrap 5 Toasts Accessibility Attributes:
- aria-live: You can set the aria-live value to “assertive” for the important messages and role=” status”, aria-live=”polite” for the normal message.
- data-bs-delay: We can also pass the delay that specifies how much time the toast message appears for the user after the specified time the toast message disappears from the page automatically
Syntax:
<div class="toast"> <div class="toast-header"> <strong>Toast header</strong> </div> <div class="toast-body"> <p>toast body</p> </div> </div>
Example 1: In this example, we will demonstrate a basic toast message when we click a button.
HTML
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body > < center > < h1 class = "text-success" > w3wiki </ h1 > < h3 >Bootstrap 5 Toast Accessibility</ h3 > < button class = "btn btn-primary" id = "toast" > toast me </ button > < div aria-atomic = "true" class = "toast" > < div class = "toast-header" > < strong class = "me-auto" >Toast header</ strong > < button type = "button" class = "btn-close" data-bs-dismiss = "toast" aria-label = "Close" > </ button > </ div > < div class = "toast-body" > This is a toast body. </ div > </ div > </ center > < script > document.getElementById("toast").onclick = function () { var toastfunList = [].slice.call(document.querySelectorAll('.toast')) var toastListfun = toastfunList.map(function (toastfun) { return new bootstrap.Toast(toastfun) }) toastListfun.forEach(toast => toast.show()) } </ script > </ body > </ html > |
Output :
Example 2: In this example, we will demonstrate the delay attribute for toast messages.
HTML
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body > < center > < h1 class = "text-success" > w3wiki </ h1 > < h3 >Bootstrap 5 Toast Accessibility</ h3 > < button class = "btn btn-primary" id = "toast" role = "alert" data-bs-delay = "10000" > hello </ button > < div aria-atomic = "true" class = "toast" > < div class = "toast-header" > < strong class = "me-auto" >Toast header</ strong > < button type = "button" class = "btn-close" data-bs-dismiss = "toast" aria-label = "Close" > </ button > </ div > < div class = "toast-body" > This is a toast body. </ div > </ div > </ center > < script > document.getElementById("toast").onclick = function () { var toastfunList = [].slice.call(document.querySelectorAll('.toast')) var toastListfun = toastfunList.map(function (toastfun) { return new bootstrap.Toast(toastfun) }) toastListfun.forEach(toast => toast.show()) } </ script > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#accessibility
Contact Us