diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-07-13 15:03:37 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-13 15:03:37 +0200 |
commit | 9a07ac789fd7bf7a95535d37f42d1150b785e65a (patch) | |
tree | e1d63716fe08513dad409b91c7324a544e6a2c0b /files/fr/web/accessibility | |
parent | ec3854db4bbb716dfb55620dec4de2bf74564e4c (diff) | |
download | translated-content-9a07ac789fd7bf7a95535d37f42d1150b785e65a.tar.gz translated-content-9a07ac789fd7bf7a95535d37f42d1150b785e65a.tar.bz2 translated-content-9a07ac789fd7bf7a95535d37f42d1150b785e65a.zip |
Fixes #1432 - Update vs. en-US page + linting (#1434)
Diffstat (limited to 'files/fr/web/accessibility')
-rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html | 73 |
1 files changed, 33 insertions, 40 deletions
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 index 15ae23c5fe..8921f74a84 100644 --- 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 @@ -1,40 +1,35 @@ --- -title: Utiliser l’attribut aria-describedby +title: Utiliser l'attribut aria-describedby slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute tags: - ARIA - - Accessibilité - - Attribut + - Accessibility + - Attribute translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby --- -<h3 id="Description">Description</h3> +<p>L'attribut <a href="https://www.w3.org/TR/wai-aria/#aria-describedby"><code>aria-describedby</code></a> est utilisé pour indiquer les identifiants 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 à <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a> où un label décrit la nature d'un objet, tandis qu'une description fournit plus d'informations pouvant être utiles à l'utilisateur.</p> -<div class="summary"> -<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a>.</p> -</div> +<p>L'attribut <code>aria-describedby</code> n'est pas uniquement utilisé pour des éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants graphiques, des groupes d'éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section <a href="#examples">Exemples</a> ci-dessous fournit plus d'informations sur l'utilisation de cet attribut dans ces cas précis.</p> -<p>L’attribut <code>aria-describedby</code> 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 à <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a> : un label décrit la nature d’un objet, tandis qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.</p> +<p>Cet attribut peut être utilisé avec n'importe quel élément de formulaire HTML ; il n'est pas limité aux éléments auxquels un rôle ARIA a été assigné.</p> -<p>L’attribut <code>aria-describedby</code> 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.</p> +<h2 id="value">Valeur</h2> -<p>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é.</p> +<p>La valeur de cet attribut est une liste d'identifiants d'éléments, séparés par des espaces</p> -<h3 id="Valeurs">Valeurs</h3> +<h2 id="possible_effects_on_user_agents_and_assistive_technology">Effets possibles sur les agents utilisateurs et les technologies d'assistance</h2> -<p>Une liste d’ID d’éléments séparés par des espaces</p> +<div class="note"><strong>Note :</strong> 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.</div> -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +<h2 id="examples">Exemples</h2> -<div class="note"><strong>Note :</strong> 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.</div> +<h3 id="example_1_application_landmark_descriptions">Exemple 1 : Descriptions des points de repère (landmarks) d'une application</h3> -<h3 id="Exemples">Exemples</h3> +<p>Dans l'exemple ci-dessous, un paragraphe d'introduction décrit une application de calendrier. <code>aria-describedby</code> est utilisé pour associer le paragraphe avec le conteneur de l'application.</p> -<h4 id="Exemple_1_Descriptions_des_points_de_repère_d’une_application">Exemple 1 : Descriptions des points de repère d’une application</h4> - -<p>Dans l’exemple ci-dessous, un paragraphe d’introduction décrit une application de calendrier. <code>aria-describedby</code> est utilisé pour associer le paragraphe avec le conteneur de l’application.</p> - -<pre class="brush: html"><div role="applicaton" aria-labelledby="calendar" aria-describedby="info"> +<pre class="brush: html"> +<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. @@ -45,46 +40,44 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-desc </div> </pre> -<h4 id="Exemple_2_Un_bouton_de_fermeture">Exemple 2 : Un bouton de fermeture</h4> +<h3 id="example_2_a_close_button">Exemple 2 : Un bouton de fermeture</h3> -<p>Dans l’exemple ci-dessous, un lien qui fonctionne comme le bouton <code>Fermer</code> d’une boîte de dialogue, est décrit ailleurs dans le document. L’attribut <code>aria-describedby</code> est utilisé pour associer la description au lien.</p> +<p>Dans l'exemple ci-dessous, un lien qui fonctionne comme le bouton <code>Fermer</code> d'une boîte de dialogue est décrit ailleurs dans le document. L'attribut <code>aria-describedby</code> est utilisé pour associer la description au lien.</p> -<pre class="brush: html"><button aria-label="Fermer" aria-describedby="descriptionClose" +<pre class="brush: html"> +<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> +<div id="descriptionClose"> + La fermeture de cette fenêtre entraînera la perte des + informations saisies et vous renverra vers la page + principale. +</div> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/" title="checkbox1/">Exemple de case à cocher</a> utilisant <code>aria-describedby</code> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="tooltip1/">Exemple d’infobulle</a> utilisant <code>aria-describedby</code>.</li> -</ul> - -<h3 id="Notes">Notes</h3> +<h2 id="notes">Notes</h2> <ul> - <li>L’attribut <code>aria-describedby</code> n’est pas destiné à référencer les descriptions d’une ressource externe – comme c’est un ID, il doit référencer un élément du même document DOM.</li> + <li>L'attribut <code>aria-describedby</code> n'est pas destiné à référencer les descriptions d'une ressource externe. Comme il s'agit d'un identifiant, il doit référencer un élément du DOM du document courant.</li> </ul> -<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3> +<h2 id="used_by_aria_roles">Utilisé par les rôles ARIA</h2> <p>Tous les éléments de balisage de base.</p> -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +<h2 id="related_aria_techniques">Techniques ARIA connexes</h2> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Utiliser l’attribut <code>aria-labelledby</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Utiliser l'attribut <code>aria-labelledby</code></a></li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> +<h2 id="compatibility">Compatibilité</h2> -<p class="comment">À 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.</p> +<p>À faire : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance.</p> -<h3 id="Autres_ressources">Autres ressources</h3> +<h2 id="additional_resources">Autres ressources</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">Spécification WAI-ARIA de aria-describedby</a></li> + <li><a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">Spécification WAI-ARIA de <code>aria-describedby</code></a></li> </ul> |