Inline alert
Alerte dans le contexte
Un message persistant placé près du contenu ou de la tâche qu'il explique, avec une urgence adaptée à la mise à jour réelle.
Avec vos mots
Ce que les gens décrivent
Alias documentés : message dans la page, alerte contextuelle, alerte de formulaire
- un message d'erreur près du formulaire en échec
- garder cet avertissement visible près du réglage
- afficher sur place pourquoi l'envoi a échoué
- un message dans le contenu de la page
- expliquer le problème près de sa cause
- une confirmation persistante sous le formulaire
Essayer
Informer l'utilisateur
Comparer les trois comportements
Scénario comparatif partagé : Un espace de travail signale un changement d'état et doit placer le message selon sa portée, son urgence et sa persistance.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Alerte dans le contexte
Inline alert reste près du contenu affecté ; Toast est temporaire et détaché, tandis que Banner traite une condition globale de page.
Votre mission
Déclencher l'échec, lire la raison, utiliser l'action de correction et vérifier que le message reste jusqu'au choix d'un fichier valide.
Cas limite à vérifier
Si l'erreur se trouve déjà dans la région d'envoi focalisée, elle n'est pas annoncée une seconde fois comme alerte assertive.
Mission
Alerte contextuelle - Inline alert
Déclencher l'échec, lire la raison, utiliser l'action de correction et vérifier que le message reste jusqu'au choix d'un fichier valide.
Taille maximale : 1 Mo.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Surface
Le conteneur visible qui accueille le contenu du composant.
À utiliser quand
- Expliquer un échec de formulaire ou d'envoi dans son contexte
- Garder un avertissement important visible jusqu'à résolution
À éviter quand
- Une courte confirmation sans risque n'a pas besoin de persister
- La condition s'applique à toute la page ou au site
Comparer les concepts proches
Toast est temporaire et détaché de la source ; Inline alert reste près du contenu concerné, tandis que Banner communique un message global de page.
Notification temporaireBanner couvre une condition globale de page ; Inline alert appartient à une tâche précise, tandis que Toast est une mise à jour temporaire.
Bannière d'annonceBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Rester jusqu'à résolution
Le message reste dans son contexte jusqu'à ce que la situation change ou que l'utilisateur le ferme volontairement.
Annoncer les changements utiles
Une région live annonce un nouvel état seulement si la mise à jour est importante et n'a pas déjà le focus.
États
Envoi prêt
Envoi prêt
Erreur de taille d’envoi
Erreur de taille d’envoi
Transitions d’état
Envoi prêt → Erreur de taille d’envoi
L’envoi d’un fichier dépassant la taille autorisée crée l’erreur persistante en ligne.
Erreur de taille d’envoi → Envoi prêt
Le choix d’un fichier dans la limite autorisée résout et retire l’erreur en ligne.
Scénarios de test
- Contexte
- L'envoi d'un fichier échoue car le document dépasse la taille autorisée.
- Mission
- Déclencher l'échec, lire la raison, utiliser l'action de correction et vérifier que le message reste jusqu'au choix d'un fichier valide.
- État principal
- L'alerte visible nomme le fichier, explique la limite de taille et propose Choisir un autre fichier.
- Cas limite
- Si l'erreur se trouve déjà dans la région d'envoi focalisée, elle n'est pas annoncée une seconde fois comme alerte assertive.
Accessibilité
- Role
- status, alert, or no live role according to urgency and focus context
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- Le message ne vole pas le focus pour les mises à jour courantes ; un échec d'envoi peut focaliser volontairement un résumé ou le premier contrôle invalide.
- Fermeture
- Il reste jusqu'à résolution ; un contrôle fermer existe seulement si masquer le message ne cache pas un risque non résolu.
- Scroll
- L'affichage ou la mise à jour du message conserve la position de lecture, sauf si le focus est déplacé volontairement vers une erreur bloquante.
- Annonce
- Les nouvelles erreurs urgentes utilisent alert, les états courants un status poli, et le texte explicatif statique aucun rôle live.
- Clavier
- Tab atteint les actions de correction dans l'ordre du document
- Entrée active l'action de correction nommée
Bindings
div or section
- implementationKind
- custom
- nativeElement
- div or section
- ariaPattern
- status, alert, or no live role according to urgency
- radixPrimitive
- Non applicable
- shadcnRecipe
- Non applicable
- runtimeDependency
- Non applicable
- packageName
- Non applicable
- exportName
- Non applicable
- exactVersion
- Non applicable
- status
- exception
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : The visible message does not automatically require role alert. Urgency and whether the update is already focused determine announcement behavior.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Alert Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Inline alert: alert semantics and the conditions for immediate assistive-technology announcement.
- WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Affirmation couverte : Inline alert: WCAG status-message requirements used to qualify non-focus-moving announcements.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.