role="alert"

What role="alert" means, and when to use it

Use alert for a message that has to interrupt, like a failed payment or a session about to expire. It is assertive by default, which means it cuts across whatever the screen reader was saying. Save it for things that earn that, because an alert used casually trains people to stop listening.

The HTML element behind role="alert"

HTML has no alert element. The output element gives you role="status", which is the polite version, and is the right choice more often than people think.

Live region roles announce changes nobody navigated to

A live region tells assistive technology to announce a change the user never went looking for. A validation error, a save confirmation, a count going up.

The container has to be in the page before the message arrives in it. Build the region and its text in the same step and the browser has nothing to compare against, so there is no change to detect and nothing is announced. Two of these roles also arrive with settings already applied. status is polite and atomic, and log is polite.

That timing mistake is invisible to a scanner, which sees a correctly built live region and reports no problem. It only shows up when somebody triggers the update for real with a screen reader running.

Where role="alert" sits in the model

Inherits from

section → structure → roletype

The name can come from

aria-labelledby or aria-label. Its own text does not become the name, so text inside it will not be read as one.

More specific roles below it

alertdialog

The normative definition stays with the W3C, so it cannot go stale here. alert in the ARIA specification.

How a checker tests role="alert"

This role carries no obligation of its own, so what a checker looks at is whether the role is a real one and whether it belongs on the element carrying it. These are the published test rules that apply.

• Role attribute has valid value

The other live roles

• log A running record where new entries pile up, like a chat history or an activity feed.
• marquee Content that scrolls, cycles or rotates on its own.
• status A message worth announcing that is not urgent enough to interrupt what somebody is doing.
• timer A counter that updates as time passes.