diff options
Diffstat (limited to 'files/fr/web/accessibility/aria/aria_techniques')
20 files changed, 126 insertions, 126 deletions
diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.md b/files/fr/web/accessibility/aria/aria_techniques/index.md index 74687a3930..b5215fc235 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/index.md @@ -97,7 +97,7 @@ Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôle - [aria-valuenow](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) - [aria-valuetext](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) -#### Attributs de zones « live » +#### Attributs de zones « live » - aria-live - aria-relevant diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md index 3a9521f0a3..38bf80ffa9 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md @@ -13,7 +13,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog Cette technique présente l’utilisation du rôle [`alertdialog`](http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#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`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` : +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`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` : - La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de `aria-labelledby` ou de `aria-label`) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut `aria-describedby`). - Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue. @@ -27,7 +27,7 @@ Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujo ### 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 le rôle `alertdialog` est utilisé, l’agent utilisateur devrait suivre les étapes suivantes : - Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation. - Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. @@ -40,7 +40,7 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus se pl ### Exemples -#### Exemple 1 : Une boîte de dialogue d’alerte +#### 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`. @@ -54,7 +54,7 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial </div> ``` -#### Exemples concrets : +#### Exemples concrets : À définir @@ -62,11 +62,11 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial ### Attributs ARIA utilisés -- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ; -- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ; +- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ; +- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ; - [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby). ### Techniques ARIA connexes -- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ; +- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ; - [Utiliser le rôle `alert`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md index ff0906e7fa..6a1b71f031 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md @@ -14,7 +14,7 @@ Cette technique présente l’utilisation de l’attribut [`aria-invalid`](http: 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. +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 @@ -39,7 +39,7 @@ Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n ### Exemples -#### Exemple 1 : validation d’un formulaire de base +#### 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. @@ -51,9 +51,9 @@ L’extrait de code suivant décrit une version simplifiée de deux champs de fo 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é). +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) : +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) : ```js function checkValidity(aID, aSearchTerm, aMsg){ @@ -69,7 +69,7 @@ function checkValidity(aID, aSearchTerm, aMsg){ } ``` -L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur : +L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur : ```js function updateAlert(msg) { diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md index 2dd44fb491..f19dcd5bfa 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md @@ -25,7 +25,7 @@ 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](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby). +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](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_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. @@ -37,7 +37,7 @@ Une légende sous forme de chaîne de caractère. ### 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. +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. ```html <button aria-label="Fermer" onclick="myDialog.close()">X</button> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md index a7a35af681..1a90536153 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md @@ -14,13 +14,13 @@ Cette technique présente l’utilisation de l’attribut [`aria-labelledby`](ht 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](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_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. +`aria-labelledby` est très similaire à l’attribut [aria-describedby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_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` 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é. +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 @@ -32,9 +32,9 @@ Lorsque les deux attributs `aria-labelledby` et [`aria-label`](/fr/Accessibilit ### Exemples -#### Exemple 1 : Labels multiples +#### 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 : +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 : ```html <div id="facturation">Facturation</div> @@ -52,7 +52,7 @@ Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois av </div> ``` -#### Exemple 2 : Association de titres et de zones +#### 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. @@ -63,9 +63,9 @@ Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec le </div> ``` -#### Exemple 3 : Groupes de boutons radio +#### Exemple 3 : Groupes de boutons radio -Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : ```html <div id="radio_label">My radio label</div> @@ -77,9 +77,9 @@ Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité </ul> ``` -#### Exemple 4 : Titre de boite de dialogue +#### 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` : +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` : ```html <div role="dialog" aria-labelledby="titreDialogue"> @@ -88,7 +88,7 @@ Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite d </div> ``` -#### Exemple 5 : Définition intégrée +#### 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**: @@ -98,15 +98,15 @@ une préparation inerte prescrite plus pour le soulagement mental du patient que </p> ``` -#### Exemple 6 : Listes de définitions +#### 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` : +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` : ```html <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> + et accompagnée de l’excommunication</dd> <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse : condamnation</dd> <dt id="homelie">homélie</dt> @@ -116,9 +116,9 @@ Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu </dl> ``` -#### Exemple 7 : Menus +#### Exemple 7 : Menus -Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : ```html <div role="menubar"> @@ -143,7 +143,7 @@ Tous les éléments de balisage de base. ### Techniques ARIA connexes -- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ; +- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ; - [Utiliser l’attribut `aria-describedby`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md index b69d64990b..4b1e1a436f 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md @@ -29,7 +29,7 @@ Vocabulaire ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous présente un curseur simple orienté verticalement. @@ -48,8 +48,8 @@ L’extrait de code ci-dessous présente un curseur simple orienté verticalemen ### Utilisé avec les rôles ARIA -- scrollbar ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ; +- scrollbar ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ; - separator. ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md index f29b625d53..91cdfe0ba3 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md @@ -7,7 +7,7 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant --- -L’attribut [aria-relevant](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), 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](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), 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. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md index 3779f56201..0582f73e61 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md @@ -18,7 +18,7 @@ L’attribut `aria-required` est utilisé pour indiquer que l’utilisateur doit ### Valeurs -`true` ou `false` (Valeur par défaut : `false`) +`true` ou `false` (Valeur par défaut : `false`) ### Effets possibles sur les agents utilisateurs et les technologies d’assistance @@ -30,7 +30,7 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Exemples -#### Exemple 1 : un formulaire simple +#### Exemple 1 : un formulaire simple ```html <form action="post"> @@ -49,12 +49,12 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Utilisé dans les rôles ARIA -- Combobox ; -- Gridcell ; -- Listbox ; -- Radiogroup ; -- Spinbutton ; -- [Textbox](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox) ; +- Combobox ; +- Gridcell ; +- Listbox ; +- Radiogroup ; +- Spinbutton ; +- [Textbox](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox) ; - Tree. ### Techniques ARIA connexes @@ -63,6 +63,6 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Autres ressources -- [Spécification WAI-ARIA pour `aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required) ; -- [WAI-ARIA Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI-ARIA de création de formulaires) ; +- [Spécification WAI-ARIA pour `aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required) ; +- [WAI-ARIA Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI-ARIA de création de formulaires) ; - [Validation de condition](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) en {{ HTMLVersionInline("5") }}. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md index c5b15f8d43..7df81da5c0 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md @@ -28,7 +28,7 @@ Si la valeur `aria-valuemax` n’est pas déterminée, ou si `aria-valuemin` n ### Exemples -#### Exemple 1: +#### Exemple 1: L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10. @@ -40,15 +40,15 @@ L’extrait de code ci-dessous montre un curseur basique avec une valeur maximal ### Utilisés avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; - [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). ### Techniques ARIA connexes -- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; - [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md index ed3cec7ca6..b00c0a91da 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md @@ -26,7 +26,7 @@ Si `aria-valuemin` n’est pas inférieure ou égale à la valeur de `aria-value ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1. @@ -38,15 +38,15 @@ L’extrait de code ci-dessous montre un curseur basique avec une valeur minimal ### Utilisé avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; - [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). ### Techniques ARIA connexes -- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; - [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md index 4cf525f585..ace6b0c1d4 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md @@ -10,7 +10,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu --- L'attribut `aria-valuenow` est utilisé pour définir la valeur courante de l'intervalle d'un composant tel qu'un curseur, un bouton tournant (potentiomètre) ou une barre de progression. Si la valeur courante n'est pas connue, l'attribut `aria-valuenow` ne devrait pas être défini. Si `aria-valuenow` a des valeurs minimale et maximale connues, on devrait définir les attributs [`aria-valuemin`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) et [`aria-valuemax`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute). -Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs **DEVRAIENT** utiliser l'attribut [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) 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`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) sera l'une des chaînes : `"petite"`, `"moyenne"` ou `"grande"`. +Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs **DEVRAIENT** utiliser l'attribut [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) 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`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) sera l'une des chaînes : `"petite"`, `"moyenne"` ou `"grande"`. L'attribut `aria-valuenow` est **obligatoire** pour les rôles [`slider`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role), [`scrollbar`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role) et [`spinbutton`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role). @@ -63,13 +63,13 @@ L'extrait de code ci-dessous affiche un curseur simple avec une valeur courante ## Techniques ARIA connexes -- [aria-valuemax](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) ; -- [aria-valuemin](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) ; +- [aria-valuemax](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) ; +- [aria-valuemin](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) ; - [aria-valuetext](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute). ## 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. +À 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.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md index 4dd141cfd7..906733906b 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md @@ -14,7 +14,7 @@ L’attribut `aria-valuetext` est utilisé pour définir un texte alternatif, li 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`, `moyenne`et `grand`, les valeurs de [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_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`. +Par exemple, dans le cas d'un curseur qui peut retourner les valeurs `petite`, `moyenne`et `grand`, les valeurs de [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_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 @@ -28,7 +28,7 @@ Si l’attribut `aria-valuetext` est absent, les technologies d’assistance com ### Exemples -#### Exemple 1 : +#### 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`. @@ -38,14 +38,14 @@ L’extrait de code ci-dessous montre un curseur simple de sélection d’un jou aria-valuetext="Dimanche"> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes ### Utilisé avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- scrollbar ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- scrollbar ; - [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) - spinbutton. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md index b67c6b261a..ee79d75065 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md @@ -34,17 +34,17 @@ Les technologies d'assistance **doivent** fournit une fonctionnalité permettant ```html <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> + <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> ``` diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md index 79d19d503d..622fc36e75 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md @@ -12,7 +12,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group Cette technique présente l’utilisation du rôle [group](http://www.w3.org/TR/wai-aria/roles#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`](http://www.w3.org/TR/wai-aria/roles#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. +Le rôle `group` est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une [`region`](http://www.w3.org/TR/wai-aria/roles#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](http://www.w3.org/TR/wai-aria/roles#listitem). Les éléments de groupe devraient être imbriqués. @@ -22,12 +22,12 @@ Si un auteur pense qu’une section est suffisamment importante pour faire parti ### 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 : +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 : -- Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé. - Les loupes d’écran devraient agrandir le groupe. @@ -36,7 +36,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : Utiliser le rôle `group` avec une arborescence HTML +#### 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. @@ -69,7 +69,7 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc </div> ``` -#### Exemple 2 : Utiliser le rôle `group` avec un menu déroulant HTML +#### 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. @@ -92,7 +92,7 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc </div> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://test.cita.illinois.edu/aria/tree/tree2.php> @@ -110,4 +110,4 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc ### Autres ressources -- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading) +- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md index 08b116042f..aa7ef0900e 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md @@ -18,12 +18,12 @@ L’attribut [tabindex](http://www.w3.org/TR/wai-aria-practices/#focus_tabindex) ### 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 : +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 : - Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation. - Déclencher un événement lien accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle `link`reçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (_List Links_) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires. - Les loupes d’écran devraient agrandir le lien. @@ -32,7 +32,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : **Ajoute le rôle dans le code HTML** +#### 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. @@ -40,7 +40,7 @@ L’extrait de code ci-dessous montre comment le rôle `link` est ajouté dans l <div role=”link”>Un lien</div> ``` -#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \<span>** +#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \<span>** ```html <script type="text/javascript"> @@ -65,7 +65,7 @@ function navigateLink(evt) { </body> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://codetalks.org/source/widgets/link/link.html> - <http://codetalks.org/source/widgets/link/link.sample.html> @@ -84,4 +84,4 @@ Si l'activation du lien déclenche une action mais ne déplace pas le focus du n ### Autres ressources -- Bonnes pratiques ARIA - Rôle `Link` : [#link](http://www.w3.org/TR/wai-aria-practices/#link) +- Bonnes pratiques ARIA - Rôle `Link` : [#link](http://www.w3.org/TR/wai-aria-practices/#link) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md index 350f5f7ebe..6be8ad4c37 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md @@ -18,12 +18,12 @@ Par défaut, les mises à jour ne contiennent que les changements apportés à l ### 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 : +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 : -- Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement journal accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que `aria-live="assertive"` soit défini, dans quel cas l'utilisateur peut être interrompu. - Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation. @@ -32,7 +32,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : Ajout du rôle dans du code HTML +#### 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. @@ -40,7 +40,7 @@ L’extrait de code ci-dessous montre comment le rôle `log` est ajouté directe <div id=”liveregion” class=”region” role=”log”></div> ``` -#### Exemple 2 : Extrait d’un exemple d’application +#### Exemple 2 : Extrait d’un exemple d’application Cet extrait de code crée le journal dans une application de chat AJAX. @@ -57,10 +57,10 @@ Cet extrait de code crée le journal dans une application de chat AJAX. Voir l’[exemple](http://codetalks.org/source/live/chat.html) sur CodeTalks pour plus d’informations. -#### Exemples concrets : +#### Exemples concrets : -- <http://test.cita.illinois.edu/aria/live/live1.php> ; -- <http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/> ; +- <http://test.cita.illinois.edu/aria/live/live1.php> ; +- <http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/> ; - <http://codetalks.org/source/live/chat.html> \[[notes](http://codetalks.org/source/live/chat_notes.html)]. ### Notes @@ -78,4 +78,4 @@ Voir l’[exemple](http://codetalks.org/source/live/chat.html) sur CodeTalks pou ### Autres ressources -- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md index 9287c5f81e..85210f2168 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md @@ -30,7 +30,7 @@ Une des recommandations d'accessibilité propose que les couleurs ou les représ <i class="icon-user" role="presentation"></i> ``` -#### Exemples concrets : +#### Exemples concrets : Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire. @@ -53,4 +53,4 @@ De plus en plus d'images sont proposées sous la forme de compositions SVG direc ## Autres ressources -Using Aria - 2.9 Use of Role=presentation or Role=none: <https://www.w3.org/TR/using-aria/#presentation> +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.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md index 2473934478..4c440daf89 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md @@ -32,21 +32,21 @@ Les lecteurs devraient annoncer les mises à jour de la progression dès qu’el ### Exemples -#### Exemple 1 : barre de progression simple avec pourcentage de progression +#### Exemple 1 : barre de progression simple avec pourcentage de progression ```html <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> ``` -#### Exemple 2 : Utilisation de `aria-valuetext` +#### Exemple 2 : Utilisation de `aria-valuetext` ```html -<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 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 : +#### Exemples concrets : ### Notes diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md index 9612cd75c3..42dd9adcea 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md @@ -12,11 +12,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider Cette technique présente l’utilisation du rôle [slider](http://www.w3.org/TR/wai-aria/roles#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. +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) : +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 | | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- | @@ -30,7 +30,7 @@ Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsq ### Exemples -#### Exemple 1 : Intervalle numérique simple +#### 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. @@ -46,12 +46,12 @@ Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une </div> ``` -#### Exemple 2 : Valeurs texte +#### 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 . +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 . ```html -<div id="slider-label">Jour de la semaine :</div> +<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" @@ -63,7 +63,7 @@ Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémanti </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` : +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` : ```js var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; @@ -78,10 +78,10 @@ var updateSlider = function (newValue) { ### Attributs ARIA utilisés -- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; -- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; -- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) ; +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) ; - [aria-orientation](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md index 2c2e2acb40..fa61595df0 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md @@ -20,21 +20,21 @@ Les technologies d’assistance devraient réserver des cellules dans la grille ### 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 : +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 : -- Présenter l’élément ayant un rôle de `status` à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de `status` à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement `status` accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ; +- Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ; - Les loupes d’écran devraient agrandir l’objet d’état. > **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 +#### 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. @@ -42,7 +42,7 @@ L’extrait de code ci-dessous montre comment le rôle `status` est ajouté dire <p role="status">Vos modifications ont été automatiquement enregistrées.</p> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes @@ -56,4 +56,4 @@ L’extrait de code ci-dessous montre comment le rôle `status` est ajouté dire ### Autres ressources -- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). |