-
Notifications
You must be signed in to change notification settings - Fork 8.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d0b4253
commit f681415
Showing
1 changed file
with
80 additions
and
69 deletions.
There are no files selected for viewing
149 changes: 80 additions & 69 deletions
149
files/fr/web/accessibility/aria/roles/alert_role/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,120 +1,131 @@ | ||
| --- | ||
| title: Utilisation du rôle alert | ||
| title: "ARIA : rôle alert" | ||
| slug: Web/Accessibility/ARIA/Roles/alert_role | ||
| l10n: | ||
| sourceCommit: 39b6b6c400f4ea334fb347240aeb4cfea8cf38ce | ||
| --- | ||
|
|
||
| ### Description | ||
| Le rôle `alert` est utilisé pour les informations importantes et généralement urgentes. `alert` est un type de [`status`](/fr/docs/Web/Accessibility/ARIA/Roles/status_role) traité comme une région dynamique atomique. | ||
|
|
||
| Cette technique présente l'utilisation du rôle [`alert` (en)](http://www.w3.org/TR/wai-aria/roles#alert) et décrit les effets produits sur les navigateurs et les technologies d'assistance. | ||
| ## Description | ||
|
|
||
| Le rôle `alert` est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l'utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d'assistance qui pourront alors le notifier à l'utilisateur. Le rôle `alert` est le plus utile lorsqu'il s'agit d'attirer l'attention de l'utilisateur, par exemple si : | ||
| Le rôle `alert` est utilisé pour communiquer un message important, et généralement urgent, à la personne. Lorsque ce rôle est ajouté à un élément, le navigateur enverra un évènement d'alerte accessible aux outils d'assistance qui pourront alors notifier la personne. | ||
|
|
||
| - Une valeur non valide a été saisie dans un champ de formulaire ; | ||
| - La session d'un utilisateur est sur le point d'expirer ; | ||
| - La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées. | ||
| Le rôle `alert` doit uniquement être utilisé pour les informations qui nécessitent une attention immédiate, comme : | ||
|
|
||
| De fait de sa nature intrusive, le rôle `alert` doit être utilisé avec parcimonie et uniquement dans les situations où l'attention de l'utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que `aria-live="polite"` ou autres rôles de zone live. | ||
| - Une valeur invalide a été saisie dans un champ d'un formulaire | ||
| - L'identifiant associé à la session va bientôt expirer | ||
| - La connexion au serveur a été rompue et les changements locaux ne seront pas enregistrés | ||
|
|
||
| ### Effets possibles sur les agents utilisateurs et les technologies d'assistance | ||
| Le rôle `alert` doit uniquement être utilisé pour le contenu texte et pas pour les éléments interactifs comme les liens ou les boutons. Il n'est pas nécessaire que les éléments avec le rôle `alert` puissent recevoir le focus, les outils d'assistance annonceront le contenu mis à jour lorsque le rôle est ajouté, quel que soit l'état du focus. | ||
|
|
||
| Lorsque le rôle `alert` est ajouté à un élément, ou qu'un tel élément devient visible, l'agent utilisateur devrait suivre les étapes suivantes : | ||
| Le rôle `alert` est à ajouter au nœud contenant le message d'alerte, **il ne doit pas** être ajouté à l'élément qui a déclenché l'alerte. Les alertes sont [des régions dynamiques assertives](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Utiliser `role="alert"` sera équivalent à définir [`aria-live="assertive"`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-live) et [`aria-atomic="true"`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-atomic). Ces régions n'ayant pas besoin du focus, il n'a pas à être géré et aucune interaction utilisateur ne doit être requise. | ||
|
|
||
| - Présenter l'élément ayant un rôle d'alerte à l'API d'accessibilité du système d'exploitation ; | ||
| - Déclencher un événement d'alerte accessible à l'aide l'API d'accessibilité du système d'exploitation si elle le prend en charge. | ||
| > **Attention :** Étant donnée sa nature intrusive, le rôle `alert` doit être utilisé avec parcimonie et uniquement pour les situations où l'attention de la personne doit être sollicitée. | ||
| Les technologies d'assistance devraient être à l'écoute de tels évènements et les notifier à l'utilisateur en conséquence : | ||
| Le rôle [`alert`](https://www.w3.org/TR/wai-aria-1.1/#alert) est l'un des cinq rôles associés aux [régions dynamiques](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Les modifications dynamiques moins urgentes doivent utiliser une méthode moins agressive, par exemple en incluant `aria-live="polite"` ou en utilisant un autre rôle de région dynamique comme [`status`](/fr/docs/Web/Accessibility/ARIA/Roles/status_role). Si la personne doit pouvoir fermer l'alerte, on utilisera plutôt le rôle [`alertdialog`](/fr/docs/Web/Accessibility/ARIA/Roles/alertdialog_role). | ||
|
|
||
| - Les lecteurs d'écran peuvent interrompre la sortie en cours (qu'elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d'alerte ; | ||
| - Les loupes ou agrandisseurs d'écran peuvent indiquer qu'une alerte est survenue et quel en est le texte. | ||
| Le rôle `alert` est destiné au contenu affiché dynamiquement, pas pour le contenu qui apparaît au chargement initial de la page. Ce rôle est idéal pour les scénarios où une personne remplit un formulaire et où JavaScript est utilisé afin d'ajouter un message d'erreur : l'alerte serait alors immédiatement énoncée. `alert` ne doit pas être utilisé pour des éléments HTML avec lesquels la personne n'a pas interagi. Ainsi, si une page est affichée et contient dès le début plusieurs alertes dans son contenu, le rôle `alert` ne doit pas être utilisé, car les messages n'ont pas été déclenchés dynamiquement. | ||
|
|
||
| > **Note :** plusieurs points de vue existent sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative. | ||
| À l'instar des autres [régions dynamiques](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), les alertes doivent uniquement être annoncées lorsque le contenu de l'élément ayant `role="alert"` est _mis à jour_. Assurez vous que l'élément avec le rôle est initialement présent dans le balisage de la page, cela permettra d'amorcer le navigateur et le lecteur d'écran qui surveilleront alors les changements sur l'élément. Une fois que ce cadre initial est mis en place, tout changement apporté au contenu sera annoncé. Il faut éviter de générer ou d'ajouter de façon dynamique des éléments `role="alert"` contenant déjà le message d'alerte voulu, cela _n'entraînera pas_ d'annonce et ne correspond à pas un changement de contenu. | ||
|
|
||
| ### Exemples | ||
| Lorsque le rôle `alert` est présent, chaque changement apporté au contenu est annoncé, et il faut donc l'utiliser avec parcimonie. Par définition, les alertes sont perturbantes. S'il y a plusieurs alertes simultanées ou des alertes inutiles, l'ergonomie sera médiocre. | ||
|
|
||
| #### Exemple 1 : Ajout du rôle dans le code HTML | ||
| ## Exemples | ||
|
|
||
| L'extrait de code ci-dessous montre comment le rôle `alert` est directement ajouté dans le code source HTML. Au moment où l'élément finit de se charger, le lecteur d'écran doit être notifié de l'alerte. Si l'élément était dans le code source original lorsque la page s'est chargée, le lecteur d'écran annonce immédiatement l'erreur après la lecture du titre de la page. | ||
| Nous allons voir ici des exemples de scénarios usuels d'utilisation `alert` et comment les implémenter. | ||
|
|
||
| ```html | ||
| <h2 role="alert"> | ||
| Votre formulaire ne peut être soumis à cause de 3 erreurs de validation. | ||
| </h2> | ||
| ``` | ||
|
|
||
| #### Exemple 2 : Ajout dynamique d'un élément avec le rôle `alert` | ||
| ### Rendre visible un élément préparé et avec le rôle `alert` | ||
|
|
||
| Cet extrait de code crée dynamiquement un élément avec un rôle `alert` et l'ajoute à la structure du document. | ||
| Si le contenu situé _à l'intérieur_ de l'élément doté de `role="alert"` est initialement masqué à l'aide de CSS, le rendre visible déclenchera l'alerte. Cela signifie qu'on peut réutiliser à plusieurs reprises un élément qui agit comme un conteneur d'alerte existant. | ||
|
|
||
| ```js | ||
| var myAlert = document.createElement("p"); | ||
| myAlert.setAttribute("role", "alert"); | ||
|
|
||
| var myAlertText = document.createTextNode( | ||
| "Vous devez accepter nos conditions d’utilisation pour créer un compte.", | ||
| ); | ||
| myAlert.appendChild(myAlertText); | ||
| document.body.appendChild(myAlertText); | ||
| ```css | ||
| .hidden { | ||
| display: none; | ||
| } | ||
| ``` | ||
|
|
||
| **Note :** le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que _jQuery_ : | ||
| ```html | ||
| <div id="expirationWarning" role="alert"> | ||
| <span class="hidden">Votre session va expirer dans 2 minutes.</span> | ||
| </div> | ||
| ``` | ||
|
|
||
| ```js | ||
| $( | ||
| "<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>", | ||
| ).appendTo(document.body); | ||
| // En retirant la classe 'hidden', le contenu à l'intérieur de l'élément devient | ||
| // visible et le lecteur d'écran annoncera l'alerte. | ||
| document | ||
| .getElementById("expirationWarning") | ||
| .firstChild.classList.remove("hidden"); | ||
| ``` | ||
|
|
||
| #### Exemple 3 : Ajout d'un rôle `alert` à un élément existant | ||
| ### Changer dynamiquement le contenu d'un élément doté du rôle `alert` | ||
|
|
||
| Parfois, il peut être utile d'ajouter un rôle `alert` à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l'utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, `role="alert"` peut être ajouté au texte de l'instruction pour que le lecteur d'écran l'annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche : | ||
| À l'aide de JavaScript, on peut modifier dynamiquement le contenu _à l'intérieur_ de l'élément ayant `role="alert"`. Attention, si vous devez déclencher la même alerte à plusieurs reprises (autrement dit, si le contenu inséré dynamiquement est le même d'une fois à l'autre), cela ne sera pas perçu comme un changement et ne déclenchera _pas_ d'annonce. Pour éviter ce problème, mieux vaudra réinitialiser le contenu du conteneur avant d'insérer le message d'alerte. | ||
|
|
||
| ```html | ||
| <p id="formInstruction">Vous devez cocher au moins trois options</p> | ||
| <div id="alertContainer" role="alert"></div> | ||
| ``` | ||
|
|
||
| ```js | ||
| // Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées : | ||
| document.getElementById("formInstruction").setAttribute("role", "alert"); | ||
| // On vide le contenu | ||
| document.getElementById("alertContainer").innerHTML = ""; | ||
| // Puis on injecte le nouveau message d'alerte | ||
| document.getElementById("alertContainer").innerHTML = | ||
| "Votre session expirera dans " + expiration + " minutes"; | ||
| ``` | ||
|
|
||
| #### Exemple 4 : Rendre visible un élément avec le rôle `alert` | ||
| ### Un conteneur d'alerte masqué, destiné aux notifications pour les lecteurs d'écran | ||
|
|
||
| Si un élément possède déjà `role="alert"` et qu'il est initialement caché par des règles CSS, le rendre visible déclenchera l'alerte comme si elle venait juste d'être ajoutée à la page. Cela signifie qu'une alerte existante peut être « réutilisée » plusieurs fois. | ||
| Il est possible de masquer le conteneur d'alerte et de l'utiliser pour fournir des mises à jour/notifications qui seront explicitement destinées aux lecteurs d'écran. Cela peut s'avérer utile lorsque du contenu important de la page a été mis à jour et où la modification ne serait pas nécessairement flagrante pour une personne utilisant un lecteur d'écran. | ||
|
|
||
| **Note :** dans la plupart des cas cette approche n'est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d'alerte qui n'est pas applicable à ce moment précis. Les utilisateurs de technologies d'assistance plus anciennes pourraient toujours percevoir le texte d'alerte même si l'alerte ne s'applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l'existence d'un problème. | ||
| Dans ces cas, il faut s'assurer que le conteneur n'est pas masqué à l'aide de `display:none` (qui le masquerait même des outils d'assistance et empêcherait toute notification). À la place, on pourra utiliser [un style `.visually-hidden`](https://www.a11yproject.com/posts/how-to-hide-content/). | ||
|
|
||
| ```css | ||
| .hidden { | ||
| display: none; | ||
| } | ||
| ```html | ||
| <div id="hiddenAlertContainer" role="alert" class="visually-hidden"></div> | ||
| ``` | ||
|
|
||
| ```html | ||
| <p id="expirationWarning" role="alert" class="hidden"> | ||
| Votre session expirera dans 2 minutes | ||
| </p> | ||
| ```css | ||
| .visually-hidden { | ||
| clip: rect(0 0 0 0); | ||
| clip-path: inset(50%); | ||
| height: 1px; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| white-space: nowrap; | ||
| width: 1px; | ||
| } | ||
| ``` | ||
|
|
||
| ```js | ||
| // suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran : | ||
| document.getElementById("expirationWarning").className = ""; | ||
| // On vide le contenu | ||
| document.getElementById("hiddenAlertContainer").innerHTML = ""; | ||
| // Puis on injecte le nouveau message d'alerte | ||
| document.getElementById("hiddenAlertContainer").innerHTML = | ||
| "Tous les objets ont été retirés du panier."; | ||
| ``` | ||
|
|
||
| ### Notes | ||
| ## Spécifications | ||
|
|
||
| - L'utilisation du rôle `alert` sur un élément implique que cet élément a l'attribut `aria-live="assertive"` ; | ||
| - Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L'élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d'écran annonceront automatiquement l'alerte où que se trouve le focus clavier ; | ||
| - Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l'utilisateur de rectifier une erreur, ou un bouton `OK` pour annuler l'alerte – le rôle [`alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) est préférable. | ||
| {{Specifications}} | ||
|
|
||
| ### Attributs ARIA utilisés | ||
| ## Voir aussi | ||
|
|
||
| - [alert (en)](https://www.w3.org/TR/wai-aria/#alert) | ||
| - [`aria-live`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-live) | ||
| - [`aria-atomic`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) | ||
| - [Rôle ARIA `log`](/fr/docs/Web/Accessibility/ARIA/Roles/log_role) | ||
| - [Rôle ARIA `marquee`](/fr/docs/Web/Accessibility/ARIA/Roles/marquee_role) | ||
| - [Rôle ARIA `status`](/fr/docs/Web/Accessibility/ARIA/Roles/status_role) | ||
| - [Rôle ARIA `timer`](/fr/docs/Web/Accessibility/ARIA/Roles/timer_role) | ||
| - [Rôle ARIA `alertdialog`](/fr/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) | ||
| - [Régions dynamiques ARIA](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) | ||
| - [Prise en charge du rôle ARIA `alert`, The Paciello Group (en anglais)](https://www.tpgi.com/aria-alert-support/) | ||
| - [Exemple d'utilisation d'`alert` (en anglais)](https://www.w3.org/WAI/ARIA/apg/patterns/alert/examples/alert/) | ||
|
|
||
| ### Techniques ARIA connexes | ||
| <section id="Quick_links"> | ||
|
|
||
| - [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; | ||
| - [Utiliser la propriété `aria-invalid`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid). | ||
| 1. [**Rôle WAI-ARIA**](/fr/docs/Web/Accessibility/ARIA/Roles) | ||
|
|
||
| ### Autres ressources | ||
| {{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}} | ||
|
|
||
| - Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) | ||
| </section> |