Alert

Alerts display essential messages that require user attention or acknowledgement. They use colour, iconography, and distinct styling to communicate success, information, warnings, or errors.

Common Mistakes to Avoid

Using role="alert" or accessibilityRole="alert" for all messages (reserve for urgent content)

Relying on colour alone to indicate alert type

Auto-dismissing error messages too quickly

Missing keyboard access to dismiss buttons

Not announcing dynamic alerts to screen readers

Using generic button labels without context

Hiding meaningful icons from screen readers

Insufficient colour contrast on alert backgrounds

Not testing with actual assistive technologies

Web

Use semantic HTML elements (<div role="alert">)

Implement proper ARIA attributes

Manage focus appropriately for dynamic alerts

Test with browser developer tools and screen reader extensions

React Native

Use accessibilityRole="alert" for urgent messages

Use accessibilityLiveRegion="polite" or "assertive" appropriately

Test with VoiceOver (iOS) and TalkBack (Android)

Ensure minimum touch target size of 44px for interactive elements