alert class and one type class: alert-info, alert-success, alert-warning or alert-danger.",
"Use a <section> element when the alert starts with a heading, so that the heading labels a section of the page. Use a <div> element when the alert has no heading.",
"Add the alert-link class to links placed inside the alert so that they keep enough contrast against the alert content."
],
"fr": [
"Placez le contenu de l'alerte dans un conteneur ayant la classe alert et une classe de type : alert-info, alert-success, alert-warning ou alert-danger.",
"Utilisez un élément <section> lorsque l'alerte commence par un titre, afin que le titre identifie une section de la page. Utilisez un élément <div> lorsque l'alerte n'a pas de titre.",
"Ajoutez la classe alert-link aux liens placés dans l'alerte afin qu'ils conservent un contraste suffisant avec le contenu de l'alerte."
]
},
"notes": {
"en": [
"Choose the type according to the message: alert-info for neutral information, alert-success to confirm that something worked, alert-warning for something people should be careful about, and alert-danger for errors or situations that can cause harm.",
"The type is conveyed by an icon and a colour. If the type matters for people to understand the message, say it in the text as well.",
"Keep the number of alerts on a page low. When everything is highlighted, nothing stands out."
],
"fr": [
"Choisissez le type selon le message : alert-info pour de l'information neutre, alert-success pour confirmer que quelque chose a fonctionné, alert-warning pour ce à quoi les gens doivent faire attention, et alert-danger pour les erreurs ou les situations pouvant causer un préjudice.",
"Le type est transmis par une icône et une couleur. Si le type est important pour comprendre le message, indiquez-le aussi dans le texte.",
"Limitez le nombre d'alertes dans une page. Lorsque tout est mis en évidence, plus rien ne ressort."
]
},
"sample": {
"en": [
{
"@type": "source-code",
"description": "Alert with a heading. Refer to the working examples page for additional code samples.",
"code": "Alert details, including a link.
\nAlert details.
\nDétails de l'alerte, incluant un lien.
\nDétails de l'alerte.
\nalert class and one type class.",
"Place a single <details> element as the only child of the alert container. All of the alert content goes inside that element.",
"Put the alert heading inside the <summary> element. Choose the heading level that fits the structure of the page. The h5 class is optional and reduces the visual size of the heading.",
"Add the open attribute to the <details> element to show the alert expanded when the page loads. Without it, the alert is collapsed."
],
"fr": [
"Construisez le conteneur de l'alerte comme d'habitude, avec la classe alert et une classe de type.",
"Placez un seul élément <details> comme unique enfant du conteneur de l'alerte. Tout le contenu de l'alerte se trouve dans cet élément.",
"Placez le titre de l'alerte dans l'élément <summary>. Choisissez le niveau de titre qui convient à la structure de la page. La classe h5 est facultative et réduit la taille visuelle du titre.",
"Ajoutez l'attribut open à l'élément <details> pour afficher l'alerte développée au chargement de la page. Sans cet attribut, l'alerte est réduite."
]
},
"notes": {
"en": [
"Write a heading that tells people what the alert is about without having to expand it.",
"Don't collapse information that people must read to complete a task or to avoid harm, such as form errors or urgent safety information. Use a regular alert instead.",
"The expanded or collapsed state isn't remembered from one page load to the next.",
"No JavaScript is required. Utility classes such as pb-2 on the <details> element aren't needed, but they're harmless.",
"Don't add role, aria-expanded or tabindex attributes to the <details> or <summary> elements. The browser provides the expand/collapse semantics and keyboard support.",
"Some browser and screen reader combinations don't list a heading placed inside a <summary> element in their headings list. Don't rely on the heading as the only way to find important content on the page."
],
"fr": [
"Rédigez un titre qui indique le sujet de l'alerte sans qu'il soit nécessaire de la développer.",
"Ne réduisez pas l'information que les gens doivent lire pour accomplir une tâche ou éviter un préjudice, comme les erreurs de formulaire ou les renseignements urgents sur la sécurité. Utilisez plutôt une alerte régulière.",
"L'état développé ou réduit n'est pas conservé d'un chargement de page à l'autre.",
"Aucun JavaScript n'est requis. Les classes utilitaires comme pb-2 sur l'élément <details> ne sont pas nécessaires, mais elles ne causent aucun problème.",
"N'ajoutez pas d'attributs role, aria-expanded ou tabindex aux éléments <details> ou <summary>. Le navigateur fournit la sémantique de développement et de réduction ainsi que la prise en charge du clavier.",
"Certaines combinaisons de navigateurs et de lecteurs d'écran n'incluent pas un titre placé dans un élément <summary> dans leur liste des titres. Ne comptez pas sur le titre comme seul moyen de trouver un contenu important dans la page."
]
},
"sample": {
"en": [
{
"@type": "source-code",
"description": "Collapsed alert. Refer to the working examples page for additional code samples.",
"code": "For accurate information, always check official Government of Canada and provincial or territorial websites.
\n\tAlert details.
\n\tPour obtenir des renseignements exacts, consultez toujours les sites Web officiels du gouvernement du Canada et des provinces ou territoires.
\n\tDétails de l'alerte.
\n\tAlert details.
\nAlert details.
\n\t