From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../aria_technique_template/index.html | 30 ++++ .../accessibility/aria/aria_techniques/index.html | 118 +++++++++++++++ .../using_the_alert_role/index.html | 134 +++++++++++++++++ .../using_the_alertdialog_role/index.html | 85 +++++++++++ .../index.html | 89 ++++++++++++ .../using_the_aria-invalid_attribute/index.html | 125 ++++++++++++++++ .../using_the_aria-label_attribute/index.html | 74 ++++++++++ .../using_the_aria-labelledby_attribute/index.html | 160 +++++++++++++++++++++ .../index.html | 75 ++++++++++ .../using_the_aria-relevant_attribute/index.html | 30 ++++ .../using_the_aria-required_attribute/index.html | 82 +++++++++++ .../using_the_aria-valuemax_attribute/index.html | 74 ++++++++++ .../using_the_aria-valuemin_attribute/index.html | 70 +++++++++ .../using_the_aria-valuenow_attribute/index.html | 78 ++++++++++ .../using_the_aria-valuetext_attribute/index.html | 66 +++++++++ .../using_the_article_role/index.html | 66 +++++++++ .../using_the_group_role/index.html | 128 +++++++++++++++++ .../aria_techniques/using_the_link_role/index.html | 75 ++++++++++ .../aria_techniques/using_the_log_role/index.html | 97 +++++++++++++ .../using_the_presentation_role/index.html | 66 +++++++++ .../using_the_progressbar_role/index.html | 69 +++++++++ .../using_the_radio_role/index.html | 41 ++++++ .../using_the_slider_role/index.html | 120 ++++++++++++++++ .../using_the_status_role/index.html | 50 +++++++ .../using_the_toolbar_role/index.html | 30 ++++ 25 files changed, 2032 insertions(+) create mode 100644 files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html (limited to 'files/fr/web/accessibility/aria/aria_techniques') diff --git a/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html b/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html new file mode 100644 index 0000000000..322f6defcb --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html @@ -0,0 +1,30 @@ +--- +title: Modèle Technique ARIA +slug: Accessibilité/ARIA/Techniques_ARIA/Modele_Technique_ARIA +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/ARIA_Technique_Template +--- +
+
+

Description

+

 

+

Effets possibles sur les agents utilisateur et les technologies d’assistance 

+

 

+
+ Note : les opinions diffèrent sur la façon dont les technologies d’assistance devraient traiter ces techniques. Les informations fournies ci-dessus sont une de ces opinions et ne sont en aucune manière normatives.
+

Exemples

+

Exemple 1 : 

+

 

+ 
Code
+

Exemples fonctionnels :

+

Notes 

+

Attributs ARIA utilisés

+

Techniques ARIA associées 

+

Compatibilité

+

TBD : Ajouter les informations de prise en charge des combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance

+

Autres ressources

+
+
+

 

diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.html b/files/fr/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..b6398235ba --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,118 @@ +--- +title: Techniques ARIA +slug: Accessibilité/ARIA/Techniques_ARIA +tags: + - ARIA + - Accessibilité + - Attributs + - Rôles +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +

Rôles

+

Rôles de composant d’interface

+ +

Rôles composés

+

Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.

+ +

Rôles de structure de document

+ +

Rôles de points de repère

+ +

États et propriétés

+

Attributs de composants d’interface

+ +

Attributs de zones « live »

+ +

Attributs de glisser-déposer

+ +

Attributs de relation

+ diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html new file mode 100644 index 0000000000..990d7dff4a --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -0,0 +1,134 @@ +--- +title: Utilisation du rôle alert +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert +tags: + - ARIA + - Accessibilité + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle alert (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

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 :

+ + + +

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.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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 :

+ + + +

Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence :

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

Exemples

+ +

Exemple 1 : Ajout du rôle dans le code HTML

+ +

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.

+ +
<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

+ +

Cet extrait de code crée dynamiquement un élément avec un rôle alert et l’ajoute à la structure du document.

+ +
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);
+
+ +

Note : le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que jQuery :

+ +
$("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body);
+
+ +

Exemple 3 : Ajout d'un rôle alert à un élément existant

+ +

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 :

+ +
<p id="formInstruction">Vous devez cocher au moins trois options</p>
+
+ +
// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées :
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

Exemple 4 : Rendre visible un élément avec le rôle alert

+ +

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.

+ +

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.

+ +
.hidden {
+  display:none;
+  }
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Votre session expirera dans 2 minutes</p>
+
+ +
// 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 = "";
+ +

Exemples concrets :

+ + + +

Notes 

+ + + +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html new file mode 100644 index 0000000000..0894b30460 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html @@ -0,0 +1,85 @@ +--- +title: Utilisation du rôle alertdialog +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog +tags: + - ARIA + - Accessibilité + - Développement Web + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle alertdialog role.

+
+ +

Le rôle alertdialog est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, alertdialog est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’utilisation du rôle dialog s’appliquent également au rôle alertdialog :

+ + + +

La différence avec les boîtes de dialogues classiques réside dans le fait que le rôle alertdialog devrait uniquement être utilisé lorsque des alertes, des erreurs ou des avertissements ont lieu. En d’autres termes, lorsque les informations et les contrôles d’une boîte de dialogue nécessitent l’attention immédiate de l’utilisateur il est préférable d’utiliser le rôle alertdialog plutôt que dialog. Il revient au développeur de faire la distinction entre les deux.

+ +

Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.

+ +
Note : ce rôle ne devrait être utilisé que pour des messages d’alertes associés à des contrôles interactifs. Si une boîte de dialogue d’alerte ne comporte que du contenu statique et qu’elle ne possède absolument aucun contrôle interactif, alertdialog n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle alert est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’utilisation du rôle alert).
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle alertdialog est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :

+ + + +

Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte.

+ +

Lorsque la boîte de dialogue est correctement labélisée et que le focus se place sur un contrôle qu’elle contient, les lecteurs d’écran devraient annoncer le rôle accessible de la boîte de dialogue, son nom et éventuellement sa description, avant d’annoncer l’élément qui a reçu le focus.

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 : Une boîte de dialogue d’alerte

+ +

L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton OK.

+ +
<div role="alertdialog" aria-labelledby="dialog1Titre" aria-describedby="dialog1Desc">
+  <div role="document" tabindex="0">
+    <h2 id="dialog1Titre">Votre session est sur le point d’expirer</h2>
+    <p id="dialog1Desc">Pour prolonger votre session, cliquez sur le bouton OK</p>
+    <button>OK</button>
+  </div>
+</div>
+ +

Exemples concrets :

+ +

À définir

+ +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html new file mode 100644 index 0000000000..44e25b657f --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -0,0 +1,89 @@ +--- +title: Utiliser l’attribut aria-describedby +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-describedby.

+
+ +

L’attribut aria-describedby est utilisé pour indiquer l’identifiant des éléments qui décrivent l’objet. Il est utilisé pour établir une relation entre des composants ou des groupes et un texte les décrivant. Il est similaire à aria-labelledby : un label décrit la nature d’un objet, tandis qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.

+ +

L’attribut aria-describedby n’est pas uniquement utilisé pour des éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.

+ +

Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.

+ +

Valeurs

+ +

Une liste d’ID d’éléments séparés par des espaces

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 : Descriptions des points de repère d’une application

+ +

Dans l’exemple ci-dessous, un paragraphe d’introduction décrit une application de calendrier. aria-describedby est utilisé pour associer le paragraphe avec le conteneur de l’application.

+ +
<div role="applicaton" aria-labelledby="calendar" aria-describedby="info">
+    <h1 id="calendar">Calendrier<h1>
+    <p id="info">
+        Ce calendrier affiche les prévisions de match du Racing Métro.
+    </p>
+    <div role="grid">
+        …
+    </div>
+</div>
+
+ +

Exemple 2 : Un bouton de fermeture

+ +

Dans l’exemple ci-dessous, un lien qui fonctionne comme le bouton Fermer d’une boîte de dialogue, est décrit ailleurs dans le document. L’attribut aria-describedby est utilisé pour associer la description au lien.

+ +
<button aria-label="Fermer" aria-describedby="descriptionClose"
+    onclick="myDialog.close()">X</button>
+…
+
+<div id="descriptionClose">La fermeture de cette fenêtre entraînera la perte des informations saisies et vous renverra vers la page principale</div>
+
+ +

Exemples concrets :

+ + + +

Notes

+ + + +

Utilisé par les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html new file mode 100644 index 0000000000..63ff4fc91c --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html @@ -0,0 +1,125 @@ +--- +title: Utiliser l'attribut aria-invalid +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-invalid.

+
+ +

L’attribut aria-invalid est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. aria-invalid peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation.

+ +

Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un rôle ARIA.

+ +

Valeurs

+ +

Vocabulaire

+ +
+
false (défaut)
+
Aucune erreur détectée
+
grammar
+
Une faute de grammaire a été détectée.
+
spelling
+
Une faute d’orthographe a été détectée.
+
true
+
La valeur n’a pas passé la validation.
+
+ +

Toute valeur absente de ce vocabulaire devrait être traitée comme true.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n’est pas valide. Les développeurs d’applications devraient fournir des suggestions pour la correction du problème, lorsque c’est possible. Les auteurs devraient empêcher la soumission de formulaires contenant des erreurs.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournit ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : validation d’un formulaire de base

+ +

L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de aria-required étant false, il n’est pas strictement nécessaire d’ajouter à entrer.

+ +
<input name="nom" id="nom" aria-required="true" aria-invalid="false"
+        onblur="checkValidity('nom', ' ', 'Le nom saisi n’est pas valide (vous devez saisir un nom et un prénom)');"/>
+<br />
+<input name="courriel" id="courriel" aria-required="true" aria-invalid="false"
+        onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/>
+
+ +

Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé).

+ +

L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) :

+ +
function checkValidity(aID, aSearchTerm, aMsg){
+    var elem = document.getElementById(aID);
+    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
+    if (invalid) {
+      elem.setAttribute("aria-invalid", "true");
+      updateAlert(aMsg);
+    } else {
+      elem.setAttribute("aria-invalid", "false");
+      updateAlert();
+    }
+}
+
+ +

L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :

+ +
function updateAlert(msg) {
+    var oldAlert = document.getElementById("alert");
+    if (oldAlert) {
+        document.body.removeChild(oldAlert);
+    }
+
+    if (msg) {
+        var newAlert = document.createElement("div");
+        newAlert.setAttribute("role", "alert");
+        newAlert.setAttribute("id", "alert");
+        var content = document.createTextNode(msg);
+        newAlert.appendChild(content);
+        document.body.appendChild(newAlert);
+    }
+}
+
+ +

Remarquez que le rôle ARIA de l’alerte est définit comme étant "alert".

+ +

Exemples concrets :

+ +

Exemple de role d’alerte (utilisant l’attribut aria-invalid).

+ +

Notes

+ + + +

Utilisé dans les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..81fdf2ae5b --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,74 @@ +--- +title: Utiliser l'attribut aria-label +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label +tags: + - ARIA + - Accessibilité + - Attribut + - aria-label +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +

L’attribut aria-label est utilisé pour définir une légende non-visible associée à un élément HTML dont le sens est transmis uniquement par le visuel. Par exemple, une croix pour fermer une fenêtre modale.

+ +

Contexte

+ +

Pour la plupart des usagers, le contexte et l'apparence d'un élément suffisent à déterminer son rôle. Par exemple, une croix pour fermer une fenêtre modale ou une icône de hamburger pour ouvrir un menu.

+ +

En revanche, certains usagers tels que les aveugles et malvoyants ne peuvent pas faire de même. Cet attribut permet aux développeurs d'indiquer une alternative textuelle à ces contrôles visuels, qui sera lue par les technologies d'assistance. En revanche, le contenu de l'attribut aria-label ne sera pas visible pour les autres usagers.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +
Note : il existe plusieurs points de vue 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.
+ +

Les lecteurs d'écran lisent le contenu textuel de cet attribut.

+ +

Usage

+ +

L’attribut aria-label ne doit être utilisé que lorsque le texte d’un label n’est pas visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut aria-labelledby.

+ +

Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément <label> pour les éléments de formulaire, ou l'attribut alt pour les images.

+ +

Valeur

+ +
+

Une légende sous forme de chaîne de caractère.

+
+ +

Exemples

+ +

Un bouton sans contenu textuel explicite

+ +

Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « Fermer » classique, avec un X en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut aria-label est utilisé pour fournir un label aux technologies d’assistance.

+ +
 <button aria-label="Fermer" onclick="myDialog.close()">X</button>
+
+ +

Un champ de saisie utilisant contentEditable

+ +

Pour proposer une expérience d'édition plus personnalisée, on pourrait utiliser une div avec l'attribut contenteditable à la place d'un élément de formulaire natif comme <textarea>. Cette situation ne permettrait pas d'associer un <label> à ce champ de saisie. Ainsi on pourrait utiliser aria-label à la place.

+ +

Pour aller plus loin

+ +

Notes

+ +

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

+ +

Utilisé par les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..34eac612ab --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,160 @@ +--- +title: Utiliser l'attribut aria-labelledby +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-labelledby.

+
+ +

L’attribut aria-labelledby est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran.

+ +

aria-labelledby est très similaire à l’attribut aria-describedby : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.

+ +

L’attribut aria-labelledby n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.

+ +

L’attribut aria-labelledby peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut for) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA.

+ +

Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.

+ +

Valeurs

+ +

Une liste d’ID d’éléments séparés par des espaces

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque les deux attributs aria-labelledby et aria-label sont utilisés, les agents utilisateurs donnent la priorité à aria-labelledby lors du calcul de la propriété de nom accessible.

+ +

Exemples

+ +

Exemple 1 : Labels multiples

+ +

Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe :

+ +
<div id="facturation">Facturation</div>
+
+<div>
+  <div id="nom">Nom</div>
+
+  <input type="text" aria-labelledby="nom facturation"/>
+</div>
+
+<div>
+  <div id="adresse">Adresse</div>
+
+  <input type="text" aria-labelledby="adresse facturation"/>
+</div>
+
+ +

Exemple 2 : Association de titres et de zones

+ +

Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui contient l’en-tête.

+ +
<div role="main" aria-labelledby="foo">
+  <h1 id="foo">Le feu devenu incontrôlable gagne les abords d’Aubagne</h1>
+  Un fort mistral a propagé le feu de forêt qui s’est déclaré ce lundi soir suite aux fortes températures de ces derniers jours…
+</div>
+
+ +

Exemple 3 : Groupes de boutons radio

+ +

Dans l’exemple ci-dessous, le conteneur d’un radiogroup est associé avec son label à l’aide de l’attribut aria-labelledby :

+ +
<div id="radio_label">My radio label</div>
+
+<ul role="radiogroup" aria-labelledby="radio_label">
+  <li role="radio">Élément №1</li>
+  <li role="radio">Élément №2</li>
+  <li role="radio">Élément №3</li>
+</ul>
+
+ +

Exemple 4 : Titre de boite de dialogue

+ +

Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut aria-labelledby :

+ +
<div role="dialog" aria-labelledby="titreDialogue">
+  <h2 id="titreDialogue">Choisir un fichier</h2>
+  … Contenus de la boîte de dialogue
+</div>
+
+ +

Exemple 5 : Définition intégrée

+ +

Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut aria-labelledby:

+ +
<p>Le docteur expliqua que c’était un <dfn id="placebo">placebo</dfn>, <span role="definition" aria-labelledby="placebo"> ou
+une préparation inerte prescrite plus pour le soulagement mental du patient que ses effets possible sur une pathologie.</span>
+</p>
+
+ +

Exemple 6 : Listes de définitions

+ +

Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut aria-labelledby :

+ +
<dl>
+  <dt id="anatheme">anathème</dt>
+    <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique
+                                         et accompagnée de l’excommunication</dd>
+    <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse&nbsp;: condamnation</dd>
+
+  <dt id="homelie">homélie</dt>
+    <dd role="definition" aria-labelledby="homelie">généralement un sermon court</dd>
+    <dd role="definition" aria-labelledby="homelie">une lecture ou un discours sur un thème moral</dd>
+
+</dl>
+
+ +

Exemple 7 : Menus

+ +

Dans l’exemple ci-dessous, un menu contextuel est associé avec son label à l’aide de l’attribut aria-labelledby :

+ +
<div role="menubar">
+  <div role="menuitem" aria-haspopup="true" id="fichierMenu">Fichier</div>
+  <div role="menu" aria-labelledby="fichierMenu">
+    <div role="menuitem">Ouvrir</div>
+    <div role="menuitem">Enregistrer</div>
+    <div role="menuitem">Enregistrer sous…</div>
+    …
+  </div>
+…
+</div>
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

+ +

Utilisé par les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html new file mode 100644 index 0000000000..289379c098 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html @@ -0,0 +1,75 @@ +--- +title: Utiliser l'attribut aria-orientation +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-orientation.

+
+ +

L’attribut aria-orientation est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.

+ +

Valeurs

+ +

Vocabulaire

+ +
+
vertical
+
L’élément est orienté verticalement.
+
horizontal (défaut)
+
L’élément est orienté horizontalement.
+
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 :

+ +

L’extrait de code ci-dessous présente un curseur simple orienté verticalement.

+ +
<a href="#" id="handle_zoomSlider"
+  role="slider"
+  aria-orientation="vertical"
+  aria-valuemin="0"
+  aria-valuemax="17"
+  aria-valuenow="14" >
+    <span>11</span>
+</a>
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html new file mode 100644 index 0000000000..2354a7be55 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html @@ -0,0 +1,30 @@ +--- +title: Utiliser l'attribut aria-relevant +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute +--- +

L’attribut aria-relevant est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région aria-live, ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut aria-live n’était pas activé.

+ +

L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée.

+ +

Valeurs

+ +

Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes :

+ + + +

aria-relevant="additions text" est la valeur par défaut d’une région live.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..79bbf0d0ed --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,82 @@ +--- +title: Utiliser l'attribut aria-required +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-required.

+
+ +

L’attribut aria-required est utilisé pour indiquer que l’utilisateur doit obligatoirement remplir un champ de formulaire avant de le soumettre. Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML ; il n’est pas limité aux éléments auxquels a été assigné un rôle ARIA.

+ +

{{ HTMLVersionInline("5") }} a introduit l’attribut required, mais aria-required est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.

+ +

Valeurs

+ +

true ou false (Valeur par défaut : false)

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire.

+ +

Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 : un formulaire simple

+ +
<form action="post">
+  <label for="prenom">Prénom&nbsp;:</label>
+  <input id="prenom" type="text" aria-required="true">
+  <br/>
+  <label for="nom">Nom&nbsp;:</label>
+  <input id="nom" type="text" aria-required="true">
+  <br/>
+  <label for="adresse">Adresse&nbsp;:</label>
+  <input id="adresse" type="text">
+</form>
+
+ +

Exemples concrets :

+ +

Exemple d’infobulle (comprenant l’utilisation de l’attribut aria-required).

+ +

Notes

+ +

Utilisé dans les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html new file mode 100644 index 0000000000..dfcacb5ea1 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html @@ -0,0 +1,74 @@ +--- +title: Utiliser l'attribut aria-valuemax +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-valuemax.

+
+ +

L’attribut aria-valuemax est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemax DOIT être supérieure ou égale à celle de aria-valuemin.

+ +

aria-valuemax est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

+ +

Valeurs

+ +

Représentation d’un nombre par une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Si la valeur aria-valuemax n’est pas déterminée, ou si aria-valuemin n’est pas inférieure ou égale à la valeur de aria-valuemax, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1:

+ +

L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10.

+ +
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Utilisés avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html new file mode 100644 index 0000000000..55e3dc2d4c --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html @@ -0,0 +1,70 @@ +--- +title: Utiliser l'attribut aria-valuemin +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute +--- +

Description

+ +

L’attribut aria-valuemin est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemin DOIT être inférieure ou égale à celle de aria-valuemax.

+ +

aria-valuemin est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

+ +

Valeurs

+ +

Représentation d’un nombre sous forme d'une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Si aria-valuemin n’est pas inférieure ou égale à la valeur de aria-valuemax, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 :

+ +

L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1.

+ +
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html new file mode 100644 index 0000000000..15f5e46588 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html @@ -0,0 +1,78 @@ +--- +title: Utiliser l'attribut aria-valuenow +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l'attribut aria-valuenow.

+
+ +

L’attribut aria-valuenow est utilisé pour définir la valeur courante de l’intervalle d’un composant tel qu’un slider, spinbutton ou une progressbar. Si la valeur courante n'est pas connue, le développeur ne devrait pas définir l’attribut aria-valuenow. Si aria-valuenow a des valeurs minimale et maximale connues, le développeur devrait définir les attributs aria-valuemin et aria-valuemax.

+ +

Lorsque la valeur retournée ne peut être précisément représentée par une nombre, les développeurs DEVRAIENT utiliser l’attribut aria-valuetext en conjonction avec aria-valuenow pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme petite, moyenne et grande. Dans ce cas, les valeurs de aria-valuenow peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de aria-valuetext sera l’une des chaînes : petite, moyenne ou grande.

+ +

L’attribut aria-valuenow est obligatoire pour les rôles slider, scrollbar et spinbutton.

+ +

Valeurs

+ +

Représentation d’un nombre par une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Pour les éléments possédant les rôles progressbar et scrollbar, les technologies d’assistance DEVRAIENT renvoyer la valeur courante sous forme de pourcentage, calculée comme étant la position dans l'intervalle compris entre aria-valuemin et aria-valuemax si les deux sont définies,  sinon la valeur actuelle avec un pourcentage.

+ +

Pour les éléments possédant les rôles slider et spinbutton, les technologies d’assistance DEVRAIENT retourner la valeur courante à l’utilisateur.

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 :

+ +

L’extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.

+ +
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html new file mode 100644 index 0000000000..a328cb3066 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html @@ -0,0 +1,66 @@ +--- +title: Utiliser l'attribut aria-valuetext +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute +--- +

Description

+ +

L’attribut aria-valuetext est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur aria-valuenow d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif spinbutton ou un curseur slider.

+ +

Les développeurs DEVRAIENT uniquement définir l’attribut aria-valuetext lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.

+ +

Par exemple, dans le cas d'un curseur qui peut retourner les valeurs petite, moyenneet grand, les valeurs de aria-valuenow pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de aria-valuetext sera l'une des chaînes suivantes : petite, moyenne ou grande.

+ +

Valeurs

+ +

Représentation d’un nombre sous forme d'une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Si l’attribut aria-valuetext est absent, les technologies d’assistance compteront uniquement sur l’attribut aria-valuenow pour la valeur courante. Si aria-valuetext est spécifié, les technologies d’assistance DEVRAIENT retourner cette valeur plutôt que celle de aria-valuenow.

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 :

+ +

L’extrait de code ci-dessous montre un curseur simple de sélection d’un jour de la semaine. La valeur du curseur est numérique, et l’attribut aria-valuetext est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement aria-valuetext selon la valeur de aria-valuenow.

+ +
<div role="slider" aria-valuenow="1"
+    aria-valuemin="1" aria-valuemax="7"
+    aria-valuetext="Dimanche">
+
+ +

Exemples concrets :

+ +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html new file mode 100644 index 0000000000..083051aa61 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html @@ -0,0 +1,66 @@ +--- +title: Utiliser le rôle article +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article +tags: + - ARIA + - Accessibilité + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle article (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

Le rôle article est utilisé pour identifier une section de page qui forme une partie indépendante d'un document, d'une page ou d'un site. Les exemples d'article peuvent être des billets de blogs ou des articles d'un magazine ou d'un journal ou encore les commentaires soumis par les utilisateurs. Ils sont indépendants dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication.

+ +

Les articles peuvent être imbriqués. Par exemple, une entrée de blog sur un site acceptant les commentaires des visiteurs pourrait représenter ces commentaires comme des articles incluent dans l'article de l'entrée de blog.

+ +

Le rôle ARIA article est similaire à l'élément {{ HTMLVersionInline("5") }} {{ HTMLElement("article") }}. Cependant l'élément {{ HTMLElement("article") }} devrait toujours recevoir le rôle ARIA article car toutes les technologies d'assistance ne prennent pas encore en charge HTML5.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque l'utilisateur navigue dans un élément ayant le rôle article, les technologies d'assistance qui interceptent généralement les événements clavier standards doivent basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.

+ +

Les technologies d'assistance doivent fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments article imbriqués.

+ +
Note: il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Utilisation du role article sans élément article :

+ +
<div role="article">
+
+  <h1>Une titre de billet de blog</h1>
+  <p>contenu du billet...</p>
+
+  <div class="comments">
+    <div role="article">
+      <p>Un premier commentaire</p>
+    </div>
+    <div role="article">
+      <p>Un deuxième commentaire</p>
+    </div>
+  </div>
+
+</div>
+
+ +

Exemples concrets :

+ +

Notes 

+ +

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ +

Spécification WAI-ARIA du rôle article (en)

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html new file mode 100644 index 0000000000..3e335427c7 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html @@ -0,0 +1,128 @@ +--- +title: Utiliser le rôle group +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle group et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

Le rôle group est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une region, ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle group est ajouté à un élément, , le navigateur émettra un événement group accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

+ +

Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments listitem. Les éléments de groupe devraient être imbriqués.

+ +

La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.

+ +

Si un auteur pense qu’une section est suffisamment importante pour faire partie de la table des matières d’une page, il devrait assigner un rôle de region ou un rôle standard de point de repère à cette section.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle group est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+ + + +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ + + +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 : Utiliser le rôle group avec une arborescence HTML

+ +

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement dans le code source HTML.

+ +
<div id="tree1" class="tree" role="tree" tabindex="-1">
+  <div id="animals" class="groupHeader" role="presentation" aria-owns="animalGroup" aria-expanded="true">
+    <img class="headerImg" role="presentation" tabindex="-1" src="images/treeExpanded.gif" />
+    <span role="treeitem" tabindex="0">Animaux</span>
+  </div>
+
+  <div id="animalGroup" class="group" role="group">
+    <div id="birds" class="treeitem" role="presentation">
+      <span role="treeitem" tabindex="-1">Oiseaux</span>
+    </div>
+
+    <div id="cats" class="groupHeader" role="presentation" aria-owns="catGroup" aria-expanded="false">
+      <img class="headerImg" role="presentation" tabindex="-1" src="images/treeContracted.gif" />
+      <span role="treeitem" tabindex="0">Chats</span>
+    </div>
+
+ <div id="catGroup" class="group" role="group">
+      <div id="siamese" class="treeitem" role="presentation">
+        <span role="treeitem" tabindex="-1">Siamois</span>
+      </div>
+      <div id="tabby" class="treeitem" role="presentation">
+        <span role="treeitem" tabindex="-1">Tigré</span>
+      </div>
+    </div>
+  </div>
+</div>
+ +

Exemple 2 : Utiliser le rôle group avec un menu déroulant HTML

+ +

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement au code source HTML.

+ +
<div role="menu">
+  <ul role="group">
+    <li role="menuitem">Courrier entrant</li>
+    <li role="menuitem">Archive</li>
+    <li role="menuitem">Corbeille</li>
+  </ul>
+  <ul role="group">
+    <li role="menuitem">Dossier personnalisé 1</li>
+    <li role="menuitem">Dossier personnalisé 2</li>
+    <li role="menuitem">Dossier personnalisé 3</li>
+  </ul>
+
+  <ul role="group">
+    <li role="menuitem">Nouveau dossier</li>
+  </ul>
+</div>
+ +

Exemples concrets :

+ + + +

Notes

+ + + +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html new file mode 100644 index 0000000000..2a65d9f471 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html @@ -0,0 +1,75 @@ +--- +title: Utiliser le rôle link +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role +--- +

Description

+
+

Cette technique présente l’utilisation du rôle link et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+

Le rôle link est utilisé pour identifier un élément qui crée un hyperlien vers une ressource qui peut être dans l’application ou à l’extérieur. Lorsque ce rôle est ajouté à un élément, la tabulation peut être utilisée pour donner le focus au lien et la barre d’espace ou la touche Entrée peuvent exécuter le lien.

+

L’attribut tabindex peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.

+

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+

Lorsque le rôle link est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+ +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ +
+ Note : il existe plusieurs points de vue 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.
+

Exemples

+

Exemple 1 : Ajoute le rôle dans le code HTML

+

L’extrait de code ci-dessous montre comment le rôle link est ajouté dans le code source HTML. 

+
<div role=”link”>Un lien</div>
+
+

Exemple 2 : Lien accessible créé depuis une application à l'aide d'un <span>

+
<script type="text/javascript">
+sap = {ui:{keycodes:{SPACE:32, ENTER:13 }}};
+//gère les clics et les événement clavier sur le lien
+function navigateLink(evt) {
+    if (evt.type=="click" ||
+        evt.keyCode == sap.ui.keycodes.SPACE ||
+        evt.keyCode == sap.ui.keycodes.ENTER) {
+        var ref = evt.target != null ? evt.target : evt.srcElement;
+        if (ref) window.open(ref.getAttribute("href"),"_blank");
+    }
+}
+</script>
+
+<body role="application">
+
+    <h3>Lien simple créé avec un <span></h3>
+    <span href="http://www.w3c.org" onkeydown="navigateLink(event)" onclick="navigateLink(event)" tabindex="0" id="link1" role="link" class="link">
+      Activez ce lien en appuyant sur la barre d’espace ou la touche Entrée
+    </span>
+</body>
+

Exemples concrets :

+ +

Notes

+

Si l'activation du lien déclenche une action mais ne déplace pas le focus du navigateur ou que cela ouvre une nouvelle page, vous devriez considérer l'utilisation du rôle button au lieu du rôle link.

+

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+

Autres ressources

+ diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html new file mode 100644 index 0000000000..17f4e5f336 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html @@ -0,0 +1,97 @@ +--- +title: Utiliser le rôle log +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle log et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

Le rôle log est utilisé pour identifier un élément qui crée une zone live où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l’historique d’une messagerie ou un fichier d’erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l’enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement log accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

+ +

Par défaut, les mises à jour ne contiennent que les changements apportés à la zone live et elles sont annoncées à l'utilisateur lorsqu'il est inactif. Si l'utilisateur a besoin d'entendre l'ensemble de la zone live lorsqu'un changement se produit, il faut utiliser aria-atomic="true". Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, aria-live="assertive" peut être défini pour lancer des mises à jour plus agressives.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle log est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+ + + +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ + + +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 : Ajout du rôle dans du code HTML

+ +

L’extrait de code ci-dessous montre comment le rôle log est ajouté directement dans le code source HTML.

+ +
<div id=”liveregion” class=”region” role=”log”></div>
+
+ +

Exemple 2 : Extrait d’un exemple d’application

+ +

Cet extrait de code crée le journal dans une application de chat AJAX.

+ +
<div id="chatArea" role="log">
+  <ul id="chatRegion" aria-live="polite" aria-atomic="false">
+    <li>Veuillez choisir un pseudo pour commencer à utiliser AJAX Chat.</li>
+  </ul>
+
+  <ul id="userListRegion" aria-live="off" aria-relevant="additions removals text">
+  </ul>
+</div>
+ +

Voir l’exemple sur CodeTalks pour plus d’informations.

+ +

Exemples concrets :

+ + + +

Notes

+ + + +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html new file mode 100644 index 0000000000..3aae7c9b84 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html @@ -0,0 +1,66 @@ +--- +title: Utiliser le rôle presentation +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role +--- +

Cette page présente l'usage du rôle presentation et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.

+ +

Description

+ +
+

Le rôle presentation est utilisé pour retirer toute représentation sémantique pour un élément donnée ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle presentation appliqué sur l'élément table pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes.

+
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle presentation.

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1: Les icônes-fontes

+ +

Une des recommandations d'accessibilité propose que les couleurs ou les représentations imagées (icônes par exemple) ne soient pas l'unique méthode pour transmettre une information. Ainsi nous pouvons partir du postula que votre icône est un complément décoratif à un texte explicite. Il faut donc lui appliquer un rôle presentation.

+ +
<i class="icon-user" role="presentation"></i>
+
+ +

Exemples concrets :

+ +

Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.

+ +
<button type="button" aria-haspopup="true">
+    Technologies
+    <span class="main-menu-arrow" role="presentation">▼</span>
+</button>
+
+ +

Exemple 2 : Inline SVG

+ +

De plus en plus d'images sont proposées sous la forme de compositions SVG directement insérées dans le document HTML. À l'image de l'attribut alt vide sur un élément img, il est possible d'indiquer qu'un élément SVG est purement décoratif grave au rôle presentation.

+ +
<svg role="presentation">
+…
+</svg>
+ + + +

Notes

+ +

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ +

Using Aria - 2.9 Use of Role=presentation or Role=none: https://www.w3.org/TR/using-aria/#presentation

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html new file mode 100644 index 0000000000..60fbba02c6 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html @@ -0,0 +1,69 @@ +--- +title: Utiliser le rôle progressbar +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle progressbar.

+
+ +

Le rôle progressbar devrait être utilisé pour un élément qui affiche la progression d’un tâche prenant un certain temps ou s’effectuant en plusieurs étapes.

+ +

Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs aria-valuenow, aria-valuemin et aria-valuemax. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut aria-valuenow.

+ +

Lorsqu’une tâche progresse, la valeur aria-valuenow doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.

+ +

Si le rôle progressbar décrit la progression du chargement d’une zone particulière d’une page, l’auteur DOIT utiliser l’attribut aria-describedby pour pointer vers l’état courant, et définir l’attribut aria-busy à true pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de progressbar car elle est toujours en lecture seule.

+ +
Note : généralement les technologies d’assistance retourneront la valeur de l’attribut aria-valuenow sous la forme d’un pourcentage d’une plage de valeurs comprise entre aria-valuemin et aria-valuemax, sauf si aria-valuetext est spécifié. Il est préférable de définir les valeurs pour les attributs aria-valuemin, aria-valuemax et aria-valuenow de façon appropriée pour ce calcul.
+ +
Note : les éléments possédant le rôle progressbar ont une valeur aria-readonly implicite définie à true.
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les lecteurs devraient annoncer les mises à jour de la progression dès qu’elles se produisent. Si la barre de progression a un label, il devrait également être mentionné.

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 : barre de progression simple avec pourcentage de progression

+ +
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
+
+ +

Exemple 2 : Utilisation de aria-valuetext

+ +
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100">
+  Étape 2 : Copie des fichiers…
+</div>
+
+
+ +

Exemples concrets :

+ +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html new file mode 100644 index 0000000000..db1bb8281e --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html @@ -0,0 +1,41 @@ +--- +title: Utilisation du groupe rôle +slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_rôle +tags: + - NeedsContent +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role +--- +

 

+ +

Description

+ +

 

+ +

Effets possibles sur les agents utilisateurs et les technologies d'assistance

+ +
Note:il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ici est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : 

+ +

 

+ +
Code
+ +

Exemples concrets :

+ + + +

Notes 

+ +

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html new file mode 100644 index 0000000000..81653c4e28 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -0,0 +1,120 @@ +--- +title: Utiliser le rôle slider +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle slider.

+
+ +

Le rôle slider est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle slider est assigné à la « molette », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut aria-valuenow du curseur de défilement (et si possible aria-valuetext) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations.

+ +

Clavier et focus

+ +

Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) :

+ + + + + + + + + + + + + + + + + + + + + + +
Touche(s)Action
Flèches haut et droiteAugmente la valeur sélectionnée
Flèches bas et gaucheBaisse la valeur sélectionnée
Page haut et Page basAugmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +
Note : il existe plusieurs points de vue 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.
+ +

Exemples

+ +

Exemple 1 : Intervalle numérique simple

+ +

Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de aria-valuenow en réponse à l'action de l'utilisateur.

+ +
<div id="slider-label">Volume</div>
+
+<div class="vol-slider">
+  <a href="#" id="vol-handle" class="handle" role="slider" aria-labelledby="slider-label"
+    aria-valuemin="1"
+    aria-valuemax="100"
+    aria-valuenow="60">
+  </a>
+</div>
+
+ +

Exemple 2 : Valeurs texte

+ +

Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut aria-valuetext est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine .

+ +
<div id="slider-label">Jour de la semaine :</div>
+
+<div class="day-slider">
+  <a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label"
+    aria-valuemin="1"
+    aria-valuemax="7"
+    aria-valuenow="2"
+    aria-valuetext="Lundi">
+  </a>
+</div>
+
+ +

L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs aria-valuenow et aria-valuetext :

+ +
var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
+var updateSlider = function (newValue) {
+    var handle = document.getElementById("day-handle");
+    handle.setAttribute("aria-valuenow", newValue.toString());
+    handle.setAttribute("aria-valuetext", dayNames[newValue]);
+};
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html new file mode 100644 index 0000000000..46fb52e131 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html @@ -0,0 +1,50 @@ +--- +title: Utiliser le rôle status +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role +--- +

Description

+
+

Cette technique présente l’utilisation du rôle status et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+

Le rôle status est un type de zone live et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une alerte. Il est souvent présenté comme une barre d’état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement status accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.

+

Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut aria-controls.

+

Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état.

+

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+

Lorsque le rôle status est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+ +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ +
+ Note : il existe plusieurs points de vue 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.
+

Exemples

+

Exemple 1 : ajout du rôle status dans le code HTML

+

L’extrait de code ci-dessous montre comment le rôle status est ajouté directement dans le code source HTML.

+
<p role="status">Vos modifications ont été automatiquement enregistrées.</p>
+
+

Exemples concrets :

+

Notes

+

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+

Autres ressources

+ diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html new file mode 100644 index 0000000000..890b809cba --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html @@ -0,0 +1,30 @@ +--- +title: Utiliser le rôle toolbar +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar +tags: + - ARIA + - Accessibilité + - NeedsContent + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role +--- +

Description

+
+  
+

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+

 

+
+ Note : il existe plusieurs points de vue 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.
+

Exemples

+

Exemple 1 :

+

 

+
Code
+

Exemples concrets :

+ +

Notes

+

Attributs ARIA utilisés

+

Techniques ARIA connexes

+

Compatibilité

+

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+

Autres ressources

-- cgit v1.2.3-54-g00ecf