A large callout is a message that is relevant to the user in the context of a task.
These should be used sparingly and only for important information.
Communicates to users that something is wrong and prevents them from moving forward, like form validation errors or system failures.
Brings something to the user’s attention when necessary, but the nature of the scenario does not block the user’s intended action.
Used to convey that a task has been performed successfully like a form submission or settings update.
Presents a neutral piece of information that requires no interaction but is relevant to the task at hand.
Callouts are also used for error summary messaging at the top of a form application page after the form has been submitted, validated on the server side, and the page has refreshed. Front-end dynamic validation may also follow this treatment, with the caveat that the error summary might need to receive focus and an ‘alert’ role as there is no page refresh triggered with form validation.
The error summary callout has an inline link at the end of the body copy that navigates users to the first error field within the form.
Large notifications are site-level; its contents apply to the entire site or page, and they’re placed below the H1 and above the main content of the page.
Callout notifications shouldn’t receive forced or automatic focus. Users with assistive devices will be able to discover their messaging through common navigation techniques without being forced to “jump” to this specific element.
Only notifications that get added to a page without a page refresh (AJAX calls) will receive focus on the notification heading.
<div class="callout alert " role="alert" aria-labelledby="calloutHeadingAlert">
<h2 id="calloutHeadingAlert">This is an error callout</h2>
<p>Please fix the <a href="#">2 errors</a>.</p>
</div>