accessible-notifications

Toasts pose significant accessibility concerns and should be avoided. Use the alternatives below instead.

WCAG Violations

• 2.2.1 Timing Adjustable (A): Auto-dismiss prevents users from reading content
• 1.3.2 Meaningful Sequence (A): DOM placement disconnects toast from trigger
• 2.1.1 Keyboard (A): Focus management is complex and often broken
• 4.1.3 Status Messages (AA): Assistive technology announcements are disruptive

Usability Issues

• Large displays: Toasts appear outside user's field of view
• Screen magnification: Toast may be outside magnified area
• Multitasking: Auto-dismiss causes missed messages
• Blocking UI: Floats over important content like submit buttons

Successfully-Completed Simple Actions

Do nothing extra. Success should be self-evident.

```vue

```

Successfully-Completed Complex Actions

Use persistent banners or progressive content display:

```vue

Created {{ bulkResult.count }} issues successfully.

View all

```

Unsuccessful Actions (Errors)

Use inline validation or banners:

```vue

{{ submitError.message }}

```

Form Submission Success

Use interstitial confirmation or redirect with banner:

```vue

Your request has been submitted. Reference: #{{ referenceId }}

// router.push({ name: 'item-detail', params: { id: newItem.id } })

```

Long-Running Tasks

Use persistent banners + other channels (email, push notifications):

```vue

Export complete. Download file

```

When to Announce

• Always: Location changes, navigation
• Always: Failed user actions (validation, errors)
• Sometimes: Essential streaming content (logs)
• Avoid: Non-essential updates (presence indicators, comments by others)

Implementation

Use aria-live regions for dynamic content that must be announced:

```vue

```

| Scenario | Solution |

|----------|----------|

| Simple action succeeded | No feedback needed |

| Complex action succeeded | Persistent banner |

| Action failed | Inline error or banner |

| Form submitted | Confirmation page or redirect |

| Long task complete | Banner + email/push |

| Need user attention | Dialog (interruptive) |