Use summary box for key facts or next steps extracted from a longer page, alert for urgent current-task status, warning text for severe consequence copy before action, and disclosure details for optional hidden explanation.
Use summary box for key facts or next steps extracted from a longer page, alert for urgent current-task status, warning text for severe consequence copy before action, and disclosure details for optional hidden explanation.
Practice the judgment: Imagine this situation: A static next-steps summary is implemented as an alert and interrupts assistive technology output unnecessarily. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Summary box | Alert | Warning text | Disclosure / details |
|---|---|---|---|---|
| UI or UX | UI + UX - Highlighted region for key information from a longer page | UI + UX - Urgent current-task status message | UI + UX - Severe-consequence warning copy before an action | UI + UX - Single in-place reveal for optional supporting content |
| UI guidance | Render a summary box as a labelled region with a specific heading, short body, scannable key points or next steps, and only links that directly support the summarized page task. | Render an alert as a visible message in the current task area with a clear severity cue, short title, consequence-focused body, and one direct action or safe dismissal when appropriate. | Render warning text as a short high-emphasis statement with a warning icon, visible or hidden warning label, and explicit consequence copy placed before the relevant action, declaration, or instruction. | Render one clearly labelled disclosure control with a visible summary that predicts the revealed content, followed immediately by the hidden explanation, example, or supporting note. |
| UX guidance | Use summary box when users need the essential facts, eligibility notes, deadlines, documents, or next steps from a longer page before reading every detail. | Use alerts when the user must notice a time-sensitive condition that affects their current task, such as session expiry, lost connection, unsaved work risk, failed submission, or a security-sensitive hold. | Use warning text when users must understand a serious consequence before acting or failing to act, such as a fine, loss of access, permanent deletion, eligibility impact, or legal responsibility. | Use disclosure details when a short explanation, example, eligibility note, or calculation help is useful to some users but would slow most users if always visible. |
| Good UI | A benefits guide has a summary box headed Before you apply with deadline, required documents, and Start application link above the detailed eligibility rules. | A session alert appears above the active editor, says the session expires in 2 minutes, and offers Save draft while keeping the editor usable. | Before Submit declaration, a warning with an exclamation icon says the user may be fined if they provide false information. | A tax form shows a summary labelled How we calculate household income, revealing a short worked example below the income field. |
| Bad UI | A pale box repeats the entire page introduction, every related link, and several unrelated policy notes. | Users miss an urgent condition because the message auto-expires or appears far from the affected task. | A red sentence says Important below the submit button after the user has already acted. | A page uses ten Details controls as section navigation, with some triggers revealing text and others opening pages. |
| Good UX | A user scans the box, learns they need photo ID and proof of address, then continues into the detailed instructions with the same terms repeated in context. | When the connection returns, the alert downgrades to a success status and then can be dismissed safely. | Users see the fine or eligibility consequence before checking the declaration and can pause to verify their answer. | A user opens the calculation help, reads one example, closes it, and the nearby income field value remains unchanged. |
| Bad UX | Users treat static summary guidance as a current alert because the styling mimics alerts. | The only warning that unsaved work will be lost disappears after five seconds. | Users incur a penalty because the warning looked like ordinary hint text. | Users miss a deadline because the deadline is hidden inside a collapsed disclosure with a vague label. |
| Best fit | A longer page has a small set of key facts or next steps that users need early. | A current task has a time-sensitive warning, error, or important status change. | A user must understand a serious consequence before taking or skipping an action. | One short supporting explanation belongs in place beside the content it clarifies. |
| Avoid when | The highlighted content is an urgent status, outage, validation result, or severe consequence. | The message belongs beside one object, row, field, or local section. | The message is a dynamic task status that must be announced when it appears. | The content is required to make the right decision. |
| Required state | Default summary box with heading, concise body, key points or next steps, and optional task-specific link. | Advisory or success state that uses calmer status semantics rather than assertive alert semantics. | Before-action warning state placed immediately before the related control or declaration. | Closed state with a specific summary label and hidden supporting content. |
| Accessibility burden | Expose the box as a labelled region or group with a heading that fits the page heading hierarchy. | Use role alert for urgent dynamic text and avoid putting interactive controls inside the role-alert node itself. | Keep the warning in reading order before the control, declaration, or instruction it qualifies. | Use native summary behavior or a button that exposes expanded and collapsed state. |
| Common misuse | Repeating the whole page in a highlighted box. | Using a disappearing toast for warnings users must act on before continuing. | Using warning text for routine hints, explanations, or mild reminders. | Using vague summaries such as More, Details, or Click here. |