diff --git a/src/fr/articles/aria-live-alert.md b/src/fr/articles/aria-live-alert.md index 5fd263ff11..bf7f8577e1 100644 --- a/src/fr/articles/aria-live-alert.md +++ b/src/fr/articles/aria-live-alert.md @@ -12,13 +12,34 @@ Les utilisateurs qui naviguent à l'aide d'un lecteur d'écran ne sont pas toujo ## Le role alert -Positionné sur un élément HTML, celui-ci permet d'indiquer au lecteur d'écran de vocaliser l'élément automatiquement lors de sa création. Veiller toutefois à utiliser ce rôle uniquement dans les cas appropriés, comme il est clairement indiqué dans la documentation [MDN de Mozilla](https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_r%C3%B4le_alert). De fait de sa nature intrusive, le role 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. +Le rôle alert, appliqué à un élément HTML, informe le lecteur d’écran qu’il doit vocaliser automatiquement le contenu de cet élément dès sa création. Ce comportement, conçu pour attirer immédiatement l’attention de l’utilisateur, en fait un outil puissant, mais aussi potentiellement intrusif. -Pour déclencher une alerte, plusieurs méthodes sont possibles, avec des supports qui différent en fonction du couple navigateur et lecteur d'écran utilisé. Vous pouvez consulter [l'article de Steve Faulkner (en anglais)](https://developer.paciellogroup.com/blog/2017/04/aria-alert-support/) à ce sujet. +### Bonnes pratiques d'utilisation -Voici quelques exemples de méthodes qui sont bien supportées. + +L’utilisation du rôle alert doit être réservée à des cas spécifiques où une intervention immédiate de l’utilisateur est requise, comme : + +- Une erreur critique dans un formulaire. +- Une alerte de sécurité ou de système. +- Une notification urgente nécessitant une action immédiate. + + +### Précautions à prendre + +Documentation : Consultez la documentation officielle, comme celle de MDN Web Docs, pour des recommandations détaillées. +Parcimonie : Évitez d’utiliser le rôle alert pour des notifications fréquentes ou non essentielles, car cela peut perturber l’expérience utilisateur. + +### Compatibilité et déclenchement + +Le support des rôles et des attributs ARIA, dont alert, varie en fonction des combinaisons navigateur/lecteur d’écran. Pour garantir une expérience optimale : + +- Testez sur plusieurs navigateurs et lecteurs d’écran. +- Adaptez les méthodes de déclenchement en fonction des environnements ciblés. + +Pour en savoir plus, vous pouvez consulter l’article de Steve Faulkner (en anglais) qui détaille les comportements spécifiques liés à l’utilisation de ce rôle. ### Créer un nouvel élément dans le DOM + On peut déclencher une alerte en insérant un nouvel élément dans le DOM via Javascript. 
<span role="alert">Ceci est un message d'alerte.</span>
@@ -39,14 +60,28 @@ element.innerHTML = '<div role="alert">Ceci est une alerte</div>'; ## L'attribut `aria-live` -Positionné sur un élément HTML, l'attribut `aria-live` permet d'indiquer au lecteur d'écran que toute modification apportée à son contenu entraînera une vocalisation par le lecteur d'écran. +L’attribut aria-live, appliqué à un élément HTML, informe le lecteur d’écran que toute modification apportée à son contenu devra être vocalisée. Cet attribut est particulièrement utile pour gérer les mises à jour dynamiques sur une page, en assurant que les utilisateurs de lecteurs d’écran soient informés des changements importants. + +Les valeurs possibles +L’attribut aria-live accepte trois valeurs principales, chacune ayant un impact différent sur le comportement du lecteur d’écran : + +- off : +Par défaut, aucune vocalisation ne sera effectuée pour les modifications de contenu. +À utiliser lorsque les mises à jour ne sont pas pertinentes pour l’utilisateur ou qu’elles n’ont pas besoin d’être annoncées. + +- polite : +Le contenu mis à jour sera vocalisé uniquement lorsque le lecteur d’écran aura terminé de traiter sa tâche en cours (par exemple, lire un paragraphe ou une autre notification). +Idéal pour les messages d’information non urgents, tels que des confirmations ou des notifications mineures. + +- assertive : +Le lecteur d’écran interrompt immédiatement sa tâche en cours pour annoncer le contenu mis à jour. +À utiliser avec prudence, uniquement pour des messages critiques ou urgents nécessitant une attention immédiate, comme des erreurs ou des alertes de sécurité. -Trois valeurs sont possibles : -- Off : aucune vocalisation -- Polite : la vocalisation aura lieu lorsque le lecteur d'écran aura fini la tâche en cours -- Assertive : le lecteur d'écran interrompt la tâche en cours pour informer l'utilisateur +### Bonnes pratiques d’utilisation -Il est fortement recommandé que l'attribut `aria-live` soit positionné sur l'élément dès le chargement de la page pour maximiser la compatibilité avec les différents couples navigateurs et lecteurs d'écran. +- Déclaration initiale : Il est fortement recommandé de positionner l’attribut aria-live sur l’élément dès le chargement de la page. Cela garantit une compatibilité optimale avec les différents navigateurs et lecteurs d’écran. +- Simplicité des mises à jour : Veillez à ce que les modifications apportées au contenu des zones live soient claires, concises et compréhensibles. +- Priorisation adaptée : Choisissez la valeur appropriée (polite ou assertive) en fonction de l’importance et de l’urgence des messages pour éviter de perturber inutilement l’utilisateur. 

 <span aria-live="polite">5 éléments sélectionnés</span>
@@ -64,4 +99,4 @@ Enfin pour être complet, sachez que le langage ARIA prévoit égal
 - [Utilisation du rôle alert](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Roles/alert_role)
 - [Zones live ARIA](https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Zones_live_ARIA)
 - [Utiliser le rôle log](https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_log)
-- [Utiliser le rôle status](https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_status)
\ No newline at end of file
+- [Utiliser le rôle status](https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_status)