Accessible Notifications Skill

Accessible Notifications

Critical: Toasts Are Not Recommended

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

Why Toasts Are Problematic

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

What to Use Instead

Successfully-Completed Simple Actions

Do nothing extra. Success should be self-evident.

<!-- User creates issue → Issue appears in list -->
<!-- No toast needed - the result IS the feedback -->

Successfully-Completed Complex Actions

Use persistent banners or progressive content display:

<Banner v-if="bulkResult" variant="success">
  Created {{ bulkResult.count }} issues successfully.
  <RouterLink :to="{ name: 'issues' }">View all</RouterLink>
</Banner>

Unsuccessful Actions (Errors)

Use inline validation or banners:

<!-- Inline validation for forms -->
<FormField :error="errors.email">
  <Input v-model="email" />
</FormField>

<!-- Banner for system errors -->
<Banner v-if="submitError" variant="destructive">
  {{ submitError.message }}
</Banner>

Form Submission Success

Use interstitial confirmation or redirect with banner:

<!-- Option 1: Confirmation page -->
<ConfirmationPage v-if="submitted">
  Your request has been submitted. Reference: #{{ referenceId }}
</ConfirmationPage>

<!-- Option 2: Redirect to result -->
// router.push({ name: 'item-detail', params: { id: newItem.id } })

Long-Running Tasks

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

<Banner v-if="taskComplete" variant="success">
  Export complete. <a :href="downloadUrl">Download file</a>
</Banner>

Assistive Technology Announcements

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:

<div aria-live="polite" aria-atomic="true" class="sr-only">
  {{ statusMessage }}
</div>

Quick Decision Guide

| 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) |

Agent Skills: Accessible Notifications

Install this agent skill to your local

Skill Files