Skip to content

Commit 9b3e29f

Browse files
committed
Docs: clarify toast accessibility guidance
1 parent 41e3253 commit 9b3e29f

File tree

1 file changed

+7
-3
lines changed

1 file changed

+7
-3
lines changed

site/src/content/docs/components/toasts.mdx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ Things to know when using the toast plugin:
1313
- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
1414
- Toasts will automatically hide if you do not specify `autohide: false`.
1515

16+
<Callout type="warning">
17+
**Consider whether a toast is the right pattern before using it.** Toasts don’t receive focus when they appear and often disappear automatically, so they work best for brief, supplemental updates. For validation errors, task-critical guidance, or actions that users need to complete, prefer a more persistent pattern such as the [alert component]([[docsref:/components/alerts]]).
18+
</Callout>
19+
1620
<Callout name="info-prefersreducedmotion" />
1721

1822
## Examples
@@ -260,7 +264,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
260264

261265
## Accessibility
262266

263-
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]([[docsref:/components/alerts]]) instead of toast.
267+
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). Because toasts don’t receive focus and may be dismissed automatically, they shouldn’t be the only way to present information users may need to act on or review later. If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]([[docsref:/components/alerts]]) instead of toast.
264268

265269
Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
266270

@@ -269,8 +273,8 @@ You also need to adapt the `role` and `aria-live` level depending on the content
269273
As the content you’re displaying changes, be sure to update the [`delay` timeout](#options) so that users have enough time to read the toast.
270274

271275
```html
272-
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
273-
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
276+
<div class="toast" role="status" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
277+
...
274278
</div>
275279
```
276280

0 commit comments

Comments
 (0)