Bootstrap 5 Toasts Accessibility

Last Updated : 15 Dec, 2022

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"> 
            GeeksforGeeks 
        </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 :

Toast Accessibility

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"> 
            GeeksforGeeks 
        </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>