Lesson 6 of 8
Toast notifications
- 14 min
- 6 checks
- 3 hints
- Go to task
Goal
Shown, announced, then gone
Explanation
A toast is a short message that confirms what just happened, like "Saved", and then disappears on its own. Someone who can't see the screen will never know it was there unless the screen reader announces it.
The announcement comes from a live region, a container with role="status": any text added inside it is announced politely, after the screen reader finishes what it's currently saying. role="alert", on the other hand, interrupts right away, so save it for errors.
The common mistake is creating the region along with the message. Screen readers watch regions that already exist, and a region that is created with its text already inside usually isn't announced. So put it on the page empty from the start, then add the messages inside it.
Your task
Make #toasts a role="status" region, and write a toast(message) function that adds an element with the class toast holding the message text to the region, then removes it after 400 milliseconds. That's a short delay we picked to make grading easy; on real sites, make it four seconds or more. Then wire #save to toast('Saved').
Checks
6 checks- The live region is on the page from the start
- toast adds a message with its text inside the region
- The message stays long enough to be read
- The message disappears on its own after the delay
- Each message has its own timer
- The save button shows a "Saved" toast