

While this is not a complete list, here are some guidelines to follow when using toasts.ĭo not require user interaction to dismiss toasts. This is useful when dynamically updating the content of the toast as it prevents screen readers from announcing only the content that has changed.

This will cause screen readers to immediately notify the user when a toast is updated, potentially interrupting any previous updates.Īria-atomic="true" is set to ensure that the entire toast is announced as a single unit. Developers can customize this behavior by using the htmlAttributes property to set aria-live to 'assertive'. However, since the attribute is set to 'polite', screen readers generally do not interrupt the current task. Ion-toast has aria-live="polite" and aria-atomic="true" set by default.Īria-live causes screen readers to announce the content of the toast when it is updated. As a result, focus is not automatically moved to a toast when one is presented. User interaction should not be required to dismiss the toast. Toasts are intended to be subtle notifications and are not intended to interrupt the user.
