Banner
Bannière d'annonce
Un message visible et persistant qui traverse une région de page pour communiquer une condition affectant largement son utilisation.
Avec vos mots
Ce que les gens décrivent
Alias documentés : barre d'annonce, avis de site, message global
- un message sur toute la largeur en haut de la page
- avertir tout le monde d'une maintenance planifiée
- une annonce pleine largeur au-dessus du contenu
- montrer que tout le service est dégradé
- un avis persistant pour tous les utilisateurs
- mettre une mise à jour globale dans une barre supérieure
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.
Bannière d'annonce
Banner couvre une condition globale de page ; Inline alert appartient à une tâche précise, tandis que Toast est une mise à jour temporaire.
Votre mission
Lire l'annonce, ouvrir les détails du service, puis naviguer vers un autre projet et vérifier que la condition reste visible.
Cas limite à vérifier
À 320 px, le message revient à la ligne sans couvrir la navigation, et le lien garde une cible tactile de 44 px.
Mission
Bannière d'annonce - Banner
Lire l'annonce, ouvrir les détails du service, puis naviguer vers un autre projet et vérifier que la condition reste visible.
Maintenance planifiée dimanche de 08 h à 09 h. Les brouillons locaux resteront disponibles.
Voir les détailsProjet Alpha
Votre espace de travail reste disponible.
Projet Bêta
Votre espace de travail reste disponible.
Détails de maintenance
La lecture reste disponible pendant l'intervention.
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
- Annoncer une maintenance affectant la page
- Communiquer un état dégradé du service
À éviter quand
- Un seul champ ou une tâche locale est affecté
- Le message est une confirmation courante sans risque
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 temporaireInline alert reste près du contenu affecté ; Toast est temporaire et détaché, tandis que Banner traite une condition globale de page.
Alerte dans le contexteBuild 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
Annonce de maintenance inactive
Annonce de maintenance inactive
Annonce de maintenance active
Annonce de maintenance active
Transitions d’état
Annonce de maintenance inactive → Annonce de maintenance active
Une maintenance planifiée pour tout l’espace est publiée avec son horaire et son lien de détails.
Annonce de maintenance active → Annonce de maintenance inactive
La maintenance annoncée se termine ou est retirée par sa source de référence.
Scénarios de test
- Contexte
- Un espace de travail annonce une maintenance en lecture seule de deux heures affectant tous les projets.
- Mission
- Lire l'annonce, ouvrir les détails du service, puis naviguer vers un autre projet et vérifier que la condition reste visible.
- État principal
- La large section nommée apparaît avant le contenu principal avec l'heure de maintenance et un lien de détails.
- Cas limite
- À 320 px, le message revient à la ligne sans couvrir la navigation, et le lien garde une cible tactile de 44 px.
Accessibilité
- Role
- named section or aside, not the site header banner role
- 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
- La bannière apparaît avant le contenu principal sans voler le focus ; ses liens reçoivent le même focus visible que la page.
- Fermeture
- Un contrôle fermer existe seulement pour les avis non critiques, et la mémorisation expire si le message change vraiment.
- 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
- Une nouvelle condition urgente peut être annoncée une fois, tandis que le contenu statique persistant reste découvrable sans annonces répétées.
- Clavier
- Tab atteint les liens dans l'ordre du document
- Entrée active les détails ou la fermeture
Bindings
section or aside with an accessible name
- implementationKind
- custom
- nativeElement
- section or aside with an accessible name
- ariaPattern
- named region
- 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 : ARIA role banner denotes the site header, so a product announcement banner normally uses a named section or aside instead.
Vérifier la source du binding
Sources
- WAI-ARIA 1.2: Roles Model
W3C WAI · standard · 2026-07-16
Affirmation couverte : Banner: normative ARIA role definitions and constraints used to qualify the stated accessible role.
- WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Affirmation couverte : Banner: 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.