Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Article web Aria Live #621

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 45 additions & 10 deletions src/fr/articles/aria-live-alert.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <abbr>DOM</abbr> via Javascript.

<pre><code class="html">&lt;span role="alert"&gt;Ceci est un message d'alerte.&lt;/span&gt;</code></pre>
Expand All @@ -39,14 +60,28 @@ element.innerHTML = '&lt;div role="alert"&gt;Ceci est une alerte&lt;/div&gt;';

## 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.

<pre><code class="html">
&lt;span aria-live="polite"&gt;5 éléments sélectionnés&lt;/span&gt;
Expand All @@ -64,4 +99,4 @@ Enfin pour être complet, sachez que le langage <abbr>ARIA</abbr> 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)
- [Utiliser le rôle status](https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_status)