Alerts — Accessibility Specification (WCAG 2.1 AA)

What is this component?

What is this component? An alert communicates important, time‑sensitive information. Use for validation errors, success confirmations, or system messages.

Accessibility Requirements

Requirement	WCAG Criteria	Description
Immediate announcement	4.1.3 (Live regions)	Use `role="alert"` or `aria-live="assertive"` for critical messages.
Clear text	3.3.1	Explain what happened and what the user should do next.
Contrast	1.4.3	Ensure text/icon contrast meets AA.

ARIA Roles and Attributes

ARIA Role/Attribute	Used On	Purpose & Usage
`role="alert"`	Alert container	Announces content immediately.
`aria-live` / `aria-atomic`	Dynamic regions	Controls live announcement behavior.

Implementation Guidelines


Your session is about to expire. Save your work.

DO’s

Use concise, actionable language.
Reserve assertive alerts for critical issues.
Provide programmatic role so AT announces the message.

Don’ts

Don’t use alerts for routine content changes.
Don’t rely on color alone to convey severity.

Common Pitfalls

Overuse of assertive: noisy and overwhelming.
Non‑actionable wording: user does not know what to do.

Testing Checklist

Test Item	WCAG Criteria	Pass Criteria
Announcement	4.1.3	AT announces alert text on injection.
Clarity	3.3.1	Message explains issue and next steps.