Aller au contenu
SkillCodex
Menu

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.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : un message sur toute la largeur en haut de la pageavertir tout le monde d'une maintenance planifiéeune annonce pleine largeur au-dessus du contenu

Toutes les formulations
Enregistrer et partager

Reconnaître

Informer l'utilisateur

Essayer

Le message est-il temporaire, persistant dans son contexte ou global à la page ?

Bannière d'annonce

Contexte commun aux essais

Un espace de travail signale un changement d'état et doit placer le message selon sa portée, son urgence et sa persistance.

Bannière d'annonce

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étails

Projet Alpha

Ton espace de travail reste disponible.

Détails de maintenance

La lecture reste disponible pendant l'intervention.

Résultat de l’essai

L'annonce de maintenance précède le contenu principal.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
La large section nommée apparaît avant le contenu principal avec l'heure de maintenance et un lien de détails.
Cas limite
Sur une largeur étroite, le message revient à la ligne sans couvrir la navigation, et le lien de détails reste facilement utilisable au toucher.

Ce que cet essai montre

Banner couvre une condition globale de page ; Inline alert appartient à une tâche précise, tandis que Toast est une mise à jour temporaire.

Lequel convient à ton besoin ?

Bannière d'annonce

Annoncer une maintenance affectant la page

Notification temporaire

Confirmer un résultat de fond à faible risque

Quel composant utilises-tu ici ?
Différence et sources

Banner couvre une condition globale de page ; Inline alert appartient à une tâche précise, tandis que Toast est une mise à jour temporaire.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Surface

    Le conteneur visible qui accueille le contenu du composant.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Informer l'utilisateur

      Bannière d'annonce appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Notification temporaire

      Choisis Bannière d’annonce si la condition persiste et que l’utilisateur doit la garder en tête en utilisant la page. Choisis Notification temporaire si tu confirmes un résultat de fond à faible risque qui ne demande aucune action.

      Comparer cette paire
    • Ne pas confondre

      Alerte dans le contexte

      Choisis Bannière d’annonce si le message concerne toute la page ou la session, comme une maintenance planifiée. Choisis Alerte dans le contexte si le message explique un problème dans un formulaire, un champ ou un envoi, là où il s’est produit.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    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

    Choisir

    À 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

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Affiche le message général et lis la zone concernée ainsi que l’action proposée.

      Résultat attendu

      Le message explique une situation qui touche la page ou le service, avec un lien clair pour agir ou en savoir plus si nécessaire.

    2. 2. À faire

      Passe à une autre rubrique alors que la situation annoncée s’applique toujours.

      Résultat attendu

      Le message reste disponible là où il est pertinent et ne disparaît pas comme une confirmation temporaire.

    3. 3. À faire

      Lis le bandeau dans une fenêtre étroite et atteins son lien ou son bouton avec Tab.

      Résultat attendu

      Le texte passe à la ligne sans masquer la navigation, l’action est accessible et le bandeau ne prend pas le focus simplement en apparaissant.

    Contrat complet
    1. 1Le message affecte réellement une large région
    2. 2Le conteneur est une section nommée sans détourner role banner
    3. 3Navigation et focus restent utilisables en petite largeur
    4. 4La fermeture ne cache jamais une condition critique non résolue

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Bannière d’annonce sans casser son comportement

    # Implémenter Bannière d’annonce dans ton agent
    
    ## Objectif
    Implémente Bannière d’annonce pour ce comportement vérifié : Un message visible et persistant qui traverse une région de page pour communiquer une condition affectant largement son utilisation.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme que Bannière d’annonce répond au besoin avant de coder.
    
    ## Comportement requis
    - Le message reste dans son contexte jusqu’à ce que la situation change ou que l’utilisateur le ferme volontairement.
    - Une région live annonce un nouvel état seulement si la mise à jour est importante et n’a pas déjà le focus.
    
    ## États à couvrir
    - Annonce de maintenance inactive
    - Annonce de maintenance active
    
    ## Accessibilité
    - Rôle ARIA : section | aside
    - Le contrôle principal ou la région nommée pour Bannière d’annonce 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.
    - 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.
    - Un contrôle fermer existe seulement pour les avis non critiques, et la mémorisation expire si le message change vraiment.
    - 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.
    - Tab atteint les liens dans l’ordre du document
    - Entrée active les détails ou la fermeture
    
    ## Quand ne pas utiliser
    - Un seul champ ou une tâche locale est affecté
    - Le message est une confirmation courante sans risque
    
    ## Critères d’acceptation
    - Le message affecte réellement une large région
    - Le conteneur est une section nommée sans détourner role banner
    - Navigation et focus restent utilisables en petite largeur
    - La fermeture ne cache jamais une condition critique non résolue
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Bannière d’annonce sur un parcours réel

    # Vérifier Bannière d’annonce après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Bannière d’annonce au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:5d75054181e7778aba38e82f2180ed6dc20bd1db32dba39a599b73091767c098

    Diagnostiquer un problème

    Trouve et corrige le défaut de Bannière d’annonce

    # Déboguer Bannière d’annonce dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés de Bannière d’annonce.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Le message affecte réellement une large région
    - Le conteneur est une section nommée sans détourner role banner
    - Navigation et focus restent utilisables en petite largeur
    - La fermeture ne cache jamais une condition critique non résolue
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction de Bannière d’annonce

    # Empêcher la régression de Bannière d’annonce
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Bannière d’annonce aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:b9a0f851617734532c22c610b579c78ecd6ac632a62249acbd961c2466b11d10

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:44d2c4f7de4675a3e0991e136fbfaa77eecb5feb2f25d5204a3691a110783cbd

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    section or aside with an accessible name

    NatifLe rôle ARIA banner désigne l’en-tête du site ; une annonce produit utilise normalement plutôt une section ou un aside nommé.

    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
    Sur une largeur étroite, le message revient à la ligne sans couvrir la navigation, et le lien de détails reste facilement utilisable au toucher.

    Signaux visuels

    • Large région avant le contenu principal
    • Message concis avec action facultative
    • Importance cohérente avec l'impact global

    Signaux comportementaux

    • Persiste entre les vues affectées
    • Ne piège pas le focus
    • Le choix de fermeture est mémorisé seulement si la condition le permet

    Accessibilité

    Rôle
    section | aside
    Nom accessible
    Le contrôle principal ou la région nommée pour Bannière d'annonce 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 clavier
    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.
    Défilement
    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

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • 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
      sourceId
      source-ui-wai-aria-roles
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Le rôle ARIA banner désigne l’en-tête du site ; une annonce produit utilise normalement plutôt une section ou un aside nommé.

      Vérifier la source du binding

    Sources

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Bannière d'annonce : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

    • WCAG 2.2: Status Messages
      sourceId
      source-ui-wcag-understanding-status-messages
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:cf2a8c16b20c1a94164c9a37e2b3f15d9a7d3f47d88385d47432d6a29655609e
      status
      verified

      Affirmation couverte : Bannière d'annonce : guide WCAG informatif sur les messages d'état annoncés sans déplacer le focus.

    • WAI-ARIA 1.2: Live Region Attributes
      sourceId
      source-ui-wai-aria-live-regions
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#attrs_liveregions
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Bannière d'annonce : propriétés normatives des régions live pour le comportement d'annonce d'état.

    • WHATWG HTML: The a element
      sourceId
      source-ui-html-link
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fe0a3d4315ccdf4f171cbb0c61ee6188b0db2dfe13a7c7f1f04f6b37528661f6
      status
      verified

      Affirmation couverte : Bannière d'annonce : sémantique native normative, états, attributs et comportement du navigateur pour a[href].

    • WHATWG HTML: The button element
      sourceId
      source-ui-html-button
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
      status
      verified

      Affirmation couverte : Bannière d'annonce : sémantique native normative, états, attributs et comportement du navigateur pour button.