Status
A status banner is a div class="status" with a type, and a role so
assistive tech announces it when it changes.
<div class="status success" role="status">Saved</div>
<div class="status error" role="alert">Email already exists</div>Types
Four types cover the common cases: success,
error, info, and warning.
User created successfully
Email already exists
3 users found
Password expires in 2 days
<div class="status success" role="status">Saved</div>
<div class="status error" role="alert">Email already exists</div>
<div class="status info" role="status">3 users found</div>
<div class="status warning" role="status">Password expires in 2 days</div>Roles
Use role="status" for ordinary updates and
role="alert" for errors that need immediate attention. The role tells assistive
tech how urgently to announce the change.
<div class="status success" role="status">Saved</div>
<div class="status error" role="alert">Email already exists</div>