Skip to main content

Curbcut WCAG AAA

Alert

Prominent inline messages — info, success, warning, danger.

Notice: Town Hall closes at noon on the day before Thanksgiving.

Saved: Your application was received.

Heads up: Online payments are unavailable Sunday 2–4 am.

Show the markup 
<div class="cc-alert" role="note">
  <p><span class="cc-alert__kind">Notice:</span> Town Hall closes at noon on the day before Thanksgiving.</p>
</div>
<div class="cc-alert cc-alert--success" role="status">
  <p><span class="cc-alert__kind">Saved:</span> Your application was received.</p>
</div>
<div class="cc-alert cc-alert--warning" role="note">
  <p><span class="cc-alert__kind">Heads up:</span> Online payments are unavailable Sunday 2–4 am.</p>
</div>
<div class="cc-alert cc-alert--danger" role="alert">
  <p><span class="cc-alert__kind">Problem:</span> We couldn't process the payment.</p>
</div>

Accessibility

  • The kind prefix ("Notice:", "Problem:") carries the severity in text — color only reinforces (1.4.1).
  • role="alert" only for urgent, interruption-worthy content injected after load; role="status" for confirmations; static notices need no live role.
  • All wash/text pairings meet 7:1.