Skip to content

Commit ea506a9

Browse files
authored
docs(toast): clarify aria-live usage (#2914)
1 parent 55b7212 commit ea506a9

File tree

1 file changed

+4
-6
lines changed

1 file changed

+4
-6
lines changed

Diff for: docs/api/toast.md

+4-6
Original file line numberDiff line numberDiff line change
@@ -134,19 +134,17 @@ Toasts are intended to be subtle notifications and are not intended to interrupt
134134

135135
### Screen Readers
136136

137-
`ion-toast` has `aria-live="polite"` and `aria-atomic="true"` set by default.
137+
`ion-toast` has `role="status"` and `aria-live="polite"` set on the inner `.toast-content` element. This causes screen readers to only announce the toast message and header. Buttons and icons will not be announced.
138138

139-
`aria-live` causes screen readers to announce the content of the toast when it is updated. However, since the attribute is set to `'polite'`, screen readers generally do not interrupt the current task. Developers can customize this behavior by using the `htmlAttributes` property to set `aria-live` to `'assertive'`. This will cause screen readers to immediately notify the user when a toast is updated, potentially interrupting any previous updates.
139+
`aria-live` causes screen readers to announce the content of the toast when it is updated. However, since the attribute is set to `'polite'`, screen readers should not interrupt the current task.
140140

141-
`aria-atomic="true"` is set to ensure that the entire toast is announced as a single unit. This is useful when dynamically updating the content of the toast as it prevents screen readers from announcing only the content that has changed.
141+
Since toasts are intended to be subtle notification, `aria-live` should never be set to `"assertive"`. If developers need to interrupt the user with an important message, we recommend using an [alert](./alert).
142142

143143
### Tips
144144

145145
While this is not a complete list, here are some guidelines to follow when using toasts.
146146

147-
* Do not require user interaction to dismiss toasts. For example, having a "Dismiss" button in the toast is fine, but the toast should also automatically dismiss on its own after a timeout period. If you need user interaction for a notification, consider using [ion-alert](./alert) instead.
148-
149-
* Avoid opening multiple toasts in quick succession. If `aria-live` is set to `'assertive'`, screen readers may interrupt the reading of the current task to announce the new toast, causing the context of the previous toast to be lost.
147+
* Do not require user interaction to dismiss toasts. For example, having a "Dismiss" button in the toast is fine, but the toast should also automatically dismiss on its own after a timeout period. If you need user interaction for a notification, consider using an [alert](./alert) instead.
150148

151149
* For toasts with long messages, consider adjusting the `duration` property to allow users enough time to read the content of the toast.
152150

0 commit comments

Comments
 (0)