Skip to main content

Alerts

Alerts are a way to display important information to the user. They are typically used to give feedback to the user about an action that has been completed or an error that has occurred. It can also be used to warn or provide important extra information to the user before an action is taken.

Design Hints
While, alerts are a great way to provide feedback to the user, it is important to ensure that they are used appropriately and sparingly. Too many alerts can be overwhelming and distracting to the user. The less alerts the user sees, the more likely they are to pay attention to the alert.
Accessiblity Hints
The role alert is used only for information that requires a user's immediate attention. Remember, this is a very intrusive role and should be used sparingly. The alert should contain all the information required to understand the issue in textual form. If using an icon without a text to convey alert type, ensure that the icon is hidden from screen readers using aria-hidden and use an sr-only class text to convey the alert type which is only visible to screen readers.

Alerts Specification

An alert contains two main parts :

  • The alert container : The container that holds the alert message and any additional content. This container should have a role of alert if immediate user attention is required.
  • The alert message : The message that is displayed in the alert container. This message should be informative and provide the user with a clear understanding of the issue or action that needs to be taken.

Colors enhance alert messages but should complement, not replace, clear textual information that conveys the alert’s primary content.

To know more you can refer to MDN documentation for the aria role=alert .

Simple Alerts

Different types of alerts are given below. Note that the last alert doesn’t have an alert role and instead uses a note role, but can be used to convey important information without interrupting the user experience.

Note : Earlier versions of the software may not support this.

Alternate Simple Alerts

A different style for simple alerts

Note : Earlier versions of the software may not support this.

Alerts with Icons

A variant of alerts which uses as icon to convey the type of alert. The icon is accompanied with a label for screen readers to convey the same information.

Note : Earlier versions of the software may not support this.
<div
class="my-2 rounded-lg bg-blue-200 p-4 text-base text-blue-950 dark:bg-blue-950 dark:text-white"
>
<div class="flex flex-row items-center" role="alert">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
aria-hidden="true"
class="mr-3 shrink-0 text-blue-800 dark:text-blue-300"
>
<path
fill="currentColor"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
></path>
</svg>
<span class="sr-only">Information : </span>
This is an informational alert to notify users about important updates or changes.
</div>
</div>
<div
class="my-2 rounded-lg bg-green-200 p-4 text-base text-green-950 dark:bg-green-950 dark:text-white"
>
<div class="flex flex-row items-center" role="alert">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
aria-hidden="true"
class="mr-3 shrink-0 text-green-800 dark:text-green-300"
>
<path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4z"
></path>
</svg>
<span class="sr-only">Success :</span>
Congratulations! Your action was completed successfully.
</div>
</div>
<div
class="my-2 rounded-lg bg-yellow-200 p-4 text-base text-black dark:bg-yellow-700/50 dark:text-white"
>
<div class="flex flex-row items-center" role="alert">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
aria-hidden="true"
class="mr-3 shrink-0 text-yellow-600 dark:text-yellow-300"
>
<path fill="currentColor" d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"
></path>
</svg>
<span class="sr-only">Warning :</span>
Please proceed with caution. There are potential risks associated with this action.
</div>
</div>
<div
class="my-2 rounded-lg bg-red-300 p-4 text-base text-black dark:bg-red-950 dark:text-white"
>
<div class="flex flex-row items-center" role="alert">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
aria-hidden="true"
class="mr-3 shrink-0 text-red-800 dark:text-red-300"
>
<path
fill="currentColor"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"
></path>
</svg>
<span class="sr-only">Error :</span>
An error occurred while processing your request. Please try again later.
</div>
</div>
<div
class="my-2 rounded-lg bg-indigo-200 p-4 text-base text-indigo-950 dark:bg-indigo-950/80 dark:text-white"
>
<div class="flex flex-row items-center" role="note">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
aria-hidden="true"
class="mr-3 shrink-0 text-indigo-800 dark:text-indigo-300"
>
<path
fill="currentColor"
d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75s-.75-.34-.75-.75s.34-.75.75-.75M9.1 17H7v-2.14l5.96-5.96l2.12 2.12zm7.75-7.73l-1.06 1.06l-2.12-2.12l1.06-1.06c.2-.2.51-.2.71 0l1.41 1.41c.2.2.2.51 0 .71"
></path>
</svg>
<span class="sr-only">Note :</span>
Earlier versions of the software may not support this.
</div>
</div>

Note: The alerts above use aria-hidden="true" to hide the icons from screen readers and a <span class="sr-only"> to provide the text which is only visible to screen readers.

Prominent Alerts

These alerts are designed in a way to be visually prominent and grab the user’s attention immediately. These only represent a higher visual prominence, not a higher semantic prominence with respect to accessibility compared to the alerts above.

Astrojs Component

Note : Requires Astrojs to work.

This is a one off astrojs component for all the alerts above. Currently alternate style for simple alerts is not implemented in this component.

Usage

To call the alerts component in your astro project, follow these steps below after copying the code into a component file:

  • Import the component from the correct location in your project.
  • Call the component with the required props.

Example implementation is given below:

---
import Alerts from "./Alerts.astro"; // import the component from the correct location in your project
---
<Alerts
type="success"
message="Congratulations! Your action was completed successfully."
showIcon={true}
prominent={true}
/>

Component Props

The component accepts the following props which are all required:

PropTypeDescription
typestringSpecifies the type of the alert. Possible values: ‘info’, ‘success’, ‘warning’, ‘error’ which sets the aria role alert. If no type is specified or another value is given, the type defaults to ‘note’ and aria role is set to ‘note’.
messagestringThe message content to be displayed in the alert.
showIconbooleanDetermines whether to display an icon corresponding to the alert type.
prominentbooleanIndicates if the alert should have a prominent style. There is only visual changes and no semantic changes for the alert.

Styling

The component uses Tailwind CSS classes for styling. The alert container has a rounded shape with padding and margin. The background color and text color of the alert vary based on the type and prominent props. If prominent is true and the type is not one of the four allowed types, it will have no effect.

Accessibility:

The alert container has a role attribute set to ‘alert’ for all defined types and set to ‘note’ for values which are outside the defined types. The aria-label attribute is set to the value of the type prop to provide an accessible name for the alert.

Icon Display:

If showIcon is true, an SVG icon corresponding to the alert type is displayed. The icon is positioned to the left of the message content. The icon color varies based on the type and prominent props.

Message Display:

If showIcon is false, the alert type is displayed as a bold text prefix to the message. The message content is displayed after the icon or type prefix.

Accessibility Testing Status

ComponentNVDAWindows NarratorWAVEAxeIBM Equal Access
Simple AlertsYesYesYesYesYes
Alternate Simple AlertsYesYesYesYesYes
Alerts with IconsYesYesYesYesYes
Prominent AlertsYesYesYesYesYes
Astrojs ComponentYesYesYesYesYes

The alerts adhere to the WAI-ARIA 1.2 specification for alert patterns.

Additional manual testing maybe required to ensure the alerts are accessible in your specific use case.