diff options
| -rw-r--r-- | files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html | 94 |
1 files changed, 52 insertions, 42 deletions
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 index c6d1e946a5..7ef937e083 100644 --- 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 @@ -8,72 +8,82 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow --- -<h3 id="Description">Description</h3> +<p>L'attribut <code>aria-valuenow</code> 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 <code>aria-valuenow</code> ne devrait pas être défini. Si <code>aria-valuenow</code> a des valeurs minimale et maximale connues, on devrait définir les attributs <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a>.</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-valuenow" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow">aria-valuenow</a>.</p> -</div> +<p>Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs <strong>DEVRAIENT</strong> utiliser l'attribut <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute"><code>aria-valuetext</code></a> en conjonction avec <code>aria-valuenow</code> pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme <code>"petite"</code>, <code>"moyenne"</code> et <code>"grande"</code>. Dans ce cas, les valeurs de <code>aria-valuenow</code> peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute"><code>aria-valuetext</code></a> sera l'une des chaînes : <code>"petite"</code>, <code>"moyenne"</code> ou <code>"grande"</code>.</p> -<p>L’attribut <code>aria-valuenow</code> est utilisé pour définir la valeur courante de l’intervalle d’un composant tel qu’un <code>slider</code>, <code>spinbutton</code> ou une <code> progressbar</code>. Si la valeur courante n'est pas connue, le développeur ne devrait pas définir l’attribut <code>aria-valuenow</code>. Si <code>aria-valuenow</code> a des valeurs minimale et maximale connues, le développeur devrait définir les attributs <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin"><code>aria-valuemin</code></a> et <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-valuemax"><code>aria-valuemax</code></a>.</p> +<p>L'attribut <code>aria-valuenow</code> est <strong>obligatoire</strong> pour les rôles <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role"><code>slider</code></a>, <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role"><code>scrollbar</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role"><code>spinbutton</code></a>.</p> -<p>Lorsque la valeur retournée ne peut être précisément représentée par une nombre, les développeurs <strong class="rfc2119">DEVRAIENT</strong> utiliser l’attribut <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l‘attribut aria-valuetext"><code>aria-valuetext</code></a> en conjonction avec <code>aria-valuenow</code> pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme <code>petite</code>, <code>moyenne</code> et <code>grande</code>. Dans ce cas, les valeurs de <code>aria-valuenow</code> peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-valuetext"><code>aria-valuetext</code></a> sera l’une des chaînes : <code>petite</code>, <code>moyenne</code> ou <code>grande</code>.</p> +<h2 id="value">Valeur</h2> -<p>L’attribut <code>aria-valuenow</code> est <strong>obligatoire</strong> pour les rôles <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p> +<p>Une chaîne de caractères qui représente le nombre.</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>Représentation d’un nombre par une chaîne</p> +<p>Pour les éléments possédant les rôles <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role"><code>progressbar</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role"><code>scrollbar</code></a>, les technologies d'assistance <strong>DEVRAIENT</strong> renvoyer la valeur courante sous forme de pourcentage, calculée comme étant la position dans l'intervalle compris entre <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a> si les deux sont définies, sinon la valeur actuelle avec un pourcentage.</p> -<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> +<p>Pour les éléments possédant les rôles <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role"><code>slider</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role"><code>spinbutton</code></a>, les technologies d'assistance <strong>DEVRAIENT</strong> retourner la valeur courante à l'utilisateur.</p> -<p>Pour les éléments possédant les rôles <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar"><code>progressbar</code></a> et <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar"><code>scrollbar</code></a>, les technologies d’assistance <strong>DEVRAIENT</strong> renvoyer la valeur courante sous forme de pourcentage, calculée comme étant la position dans l'intervalle compris entre <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a> et <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a> si les deux sont définies, sinon la valeur actuelle avec un pourcentage.</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> -<p>Pour les éléments possédant les rôles <a class="role-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Using_the_slider_role"><code>slider</code></a> et <a class="role-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton"><code>spinbutton</code></a>, les technologies d’assistance <strong class="rfc2119">DEVRAIENT</strong> retourner la valeur courante à l’utilisateur.</p> +<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">Exemple 1</h3> -<h3 id="Exemples">Exemples</h3> - -<h4 id="Exemple_1">Exemple 1 :</h4> - -<p>L’extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.</p> +<p>L'extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.</p> <pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a></li> -</ul> - -<h3 id="Notes">Notes</h3> - -<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> +<h3 id="working_examples">Exemples concrets</h3> + +<dl> + <dt><code>progressbar</code><dt> + <dd> + <ul> + <li><a href="https://dequeuniversity.com/library/aria/progress-bar-bounded">Deque Code Library of Accessibility Examples: Progress Bar (Bounded)</a></li> + <li><a href="https://dequeuniversity.com/library/aria/progress-bar-unbounded">Deque Code Library of Accessibility Examples: Progress Bar (Unbounded)</a></li> + </ul> + <dt><code>slider</code></dt> + <dd> + <ul> + <li><a href="https://w3c.github.io/aria-practices/examples/slider/multithumb-slider.html">WAI-ARIA Authoring Practices: Horizontal Multi-Thumb Slider Example</a></li> + <li><a href="https://dequeuniversity.com/library/aria/slider">Deque Code Library of Accessibility Examples: Slider</a></li> + <li><a href="https://dequeuniversity.com/library/aria/slider-multirange">Deque Code Library of Accessibility Examples: Slider (Multirange)</a></li> + </ul> + </dd> + <dt><code>spinbutton</code></dt> + <dd> + <ul> + <li><a href="https://w3c.github.io/aria-practices/examples/spinbutton/datepicker-spinbuttons.html">WAI-ARIA Authoring Practices: Date Picker Spin Button Example</a></li> + <li><a href="https://w3c.github.io/aria-practices/examples/toolbar/toolbar.html">WAI-ARIA Authoring Practices: Toolbar Example</a></li> + </ul> + </dd> + </dl> + +<h2 id="used_with_aria_roles">Rôles ARIA concernés</h2> <ul> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li> - <li>scrollbar</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li> - <li>spinbutton.</li> -</ul> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role"><code>progressbar</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role"><code>scrollbar</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role"><code>slider</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role"><code>spinbutton</code></a></li> + </ul> -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +<h2 id="related_aria_techniques">Techniques ARIA connexes</h2> <ul> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute">aria-valuemax</a> ;</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute">aria-valuemin</a> ;</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Using the aria-required attribute">aria-valuetext</a>.</li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a> ;</li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a> ;</li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</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>À 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> -<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-valuenow" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow">Spécification WAI-ARIA pour l’attribut <code>aria-valuenow</code></a>.</li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow">Spécification WAI-ARIA pour l'attribut <code>aria-valuenow</code></a>.</li> </ul> |