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.

Output :

👁 Image

Example 2: In this example, we will demonstrate the delay attribute for toast messages.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/toasts/#accessibility