Balancing auto-dismiss timeouts with screen reader announcement in Foundation Alerts

Direct Answers

1. ARIA attributes are required. Foundation Alert markup does not include role="alert" or aria-live by default. Without them, screen readers may not announce the alert at all.
2. Use a minimum timeout of 3000 ms. Values below 1000 ms risk dismissal before announcement completes, especially with longer messages or slower speech synthesizers. For multiple simultaneous alerts, combine a 3000–5000 ms timeout with explicit positioning (e.g., fixed top-right stack) to prevent layout shifts.
3. Programmatic open/close coexists with data-options timeout if you manage the sequence: call $(el).foundation('open') after the element exists, and ensure any manual close() clears the internal timer to avoid double-dismissal races.

Why This Matters

The Alert plugin treats data-alert as a simple dismissible container. It adds a close button via data-close and reads data-options='{"timeout": 3000}' for auto-dismiss, but it does not inject ARIA live-region attributes. Assistive technology therefore sees only a generic <div> that disappears—no announcement, no persistent region.

Recommended Markup Pattern

<div class="alert callout" data-alert data-options="timeout: 4000" role="alert" aria-live="polite">
  <p>Your message here</p>
  <button class="close-button" data-close aria-label="Dismiss alert">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Handling Multiple Alerts

• Give each alert a unique id and append to a positioned container (position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 9999).
• Stagger timeouts by 500–1000 ms per alert so they don’t all vanish at once.
• When opening programmatically, store the returned instance and call instance._timer && clearTimeout(instance._timer) before a manual close() to prevent the auto-dismiss callback from firing on an already-removed element.

Verification Steps

1. Inspect the rendered alert in DevTools: confirm role="alert" and aria-live="polite" are present.
2. Set data-options='{"timeout": 500}', trigger with a screen reader (NVDA, VoiceOver), and verify the message is cut off. Repeat with 4000 and confirm full announcement.
3. Fire two alerts programmatically with 4000 ms timeouts; watch for layout shift or overlap in the Elements panel.

One Diagnostic Detail Needed

Which Foundation version are you targeting (6.x vs. the legacy 5.x)? The internal timer property name (_timer vs. timer) and event hooks differ slightly, so the exact programmatic cleanup snippet depends on that version.