Alert Dialog

General

• Ensure sufficient colour contrast for all text and controls
• Provide clear, descriptive titles that explain the critical nature of the decision
• Make the consequences of each action explicit in the text
• Make all interactive elements keyboard and screen reader accessible
• Trap focus within the alert dialogue while it is open

Web

If implementing on the web, follow these guidelines:

Semantic markup

• Use role="alertdialog" on the container (not role="dialog")
• Use aria-modal="true" to indicate the modal nature
• Use aria-labelledby to reference the alert dialogue title
• Use aria-describedby to reference the alert dialogue description
• Ensure no close button or Escape key dismissal is available

Key differences from modal:

• role="alertdialog": Specifically for dialogues requiring user response (more urgent than role="dialog")
• Dismissal: Implement Escape key and overlay click dismissal
• Forced interaction: Users must select an action button

Focus management

• Move focus to the alert dialogue when it opens (typically to the primary action button)
• Trap focus within the alert dialogue
• Return focus to the triggering element after a decision is made

Keyboard navigation

• Tab (⇥) — Move focus through alert dialogue elements
• Shift + Tab (⇧ + ⇥) — Move focus backwards through alert dialogue elements
• Enter or Space — Activate focused button
• Escape — Should close the alert dialogue

Screen reader announcements

• Screen readers announce the alert dialogue role, title, and description immediately
• Example announcement: "Alert. Delete account permanently? This will permanently delete your account and all associated data. This action cannot be undone."
• The role="alertdialog" ensures urgent treatment by assistive technologies

React Native

• Use the Alert Dialog component with appropriate accessibility properties
• Provide accessibilityLabel for the alert dialogue describing its purpose
• Use accessibilityViewIsModal={true} to indicate modal behaviour
• Ensure action buttons have clear, descriptive labels
• Manage focus appropriately when the alert dialogue opens and closes

Accessibility properties:

• Alert dialogue container: Use accessibilityViewIsModal={true} to indicate content outside is inert
• Title: Use accessibilityRole="header" for the title
• Action buttons: Provide clear accessibilityLabel and accessibilityHint values e.g., "Delete account, this action cannot be undone"
• Focus management: Ensure focus moves to the alert dialogue when it opens

Button labelling:

• Make button labels explicit about the action e.g. "Delete account" rather than just "Delete"
• For destructive actions, consider adding context in the accessibilityHint e.g., "This action cannot be undone"
• Ensure buttons are clearly distinguishable in the focus order

Screen reader behaviour:

• When the alert dialogue opens, screen readers announce its urgent nature
• Screen reader users hear the title and description before reaching the action buttons
• Ensure the reading order flows logically: title → description → buttons