diff options
Diffstat (limited to 'files/fr/web/accessibility/aria/aria_techniques')
25 files changed, 2032 insertions, 0 deletions
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 +--- +<div> + <div> + <h3 id="Description">Description</h3> + <p> </p> + <h3 id="Effets_possibles_sur_les_agents_utilisateur_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateur et les technologies d’assistance </h3> + <p> </p> + <div class="note"> + <strong>Note :</strong> 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.</div> + <h3 id="Exemples">Exemples</h3> + <h4 id="Exemple_1">Exemple 1 : </h4> + <p> </p> + <pre class="brush: html">Code </pre> + <h4 id="Exemples_fonctionnels">Exemples fonctionnels :</h4> + <h3 id="Notes">Notes </h3> + <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + <h3 id="Techniques_ARIA_associées">Techniques ARIA associées </h3> + <h3 id="Compatibilité">Compatibilité</h3> + <p class="commentaire">TBD : Ajouter les informations de prise en charge des combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance</p> + <h3 id="Autres_ressources">Autres ressources</h3> + </div> +</div> +<p> </p> 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 +--- +<h3 id="Rôles">Rôles</h3> +<h4 id="Rôles_de_composant_d’interface">Rôles de composant d’interface</h4> +<ul> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert" title="Utiliser le rôle alert">Alert</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog" title="Utiliser le rôle alertdialog">Alertdialog</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_button" title="Utiliser le rôle button">Button</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox" title="Utiliser le rôle checkbox">Checkbox</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_dialog" title="Utiliser le rôle dialog">Dialog</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link" title="Utiliser le rôle link">Link</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log" title="Utiliser le rôle log">Log</a></li> + <li>Marquee</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar" title="Utiliser le rôle progressbar">Progressbar</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio" title="Utiliser le rôle radio">Radio</a></li> + <li>Scrollbar</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider" title="Utiliser le rôle slider">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status" title="Utiliser le rôle link">status</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox" title="Utiliser le rôle textbox">textbox</a></li> + <li>Timer</li> + <li>Tooltip</li> +</ul> +<h4 id="Rôles_composés">Rôles composés</h4> +<p>Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.</p> +<ul> + <li>Grid (tableau, contenant les rôles <code>row</code> (ligne), <code>gridcell</code> (cellule), <code>rowheader</code> (en-tête de ligne) et <code>columnheader</code> (en-tête de colonne))</li> + <li>Menubar / Menu (contenant les rôles <code>menuitem</code>, <code>menuitemcheckbox</code> et <code>menuitemradio</code>)</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox" title="Utiliser le rôle listbox">Listbox</a> (boîte de liste, contenant le rôle <code>option</code>)</li> + <li>Tablist (boîte à onglets, contenant les rôles <code>tab</code> et <code>tabpanel</code>)</li> + <li>Tree (arbre, contenant les rôles <code>group</code> et <code>treeitem</code>)</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio" title="Utiliser le rôle radio">Radiogroup (voir le rôle <code>Radio</code>)</a></li> + <li>Treegrid</li> +</ul> +<h4 id="Rôles_de_structure_de_document">Rôles de structure de document</h4> +<ul> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_article" title="Utiliser le rôle article">Article</a></li> + <li>Definition</li> + <li>Directory</li> + <li>Document</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group" title="Utiliser le rôle group">Group</a></li> + <li>Heading</li> + <li>Img</li> + <li>List, listitem</li> + <li>Math</li> + <li>Note</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation" title="Utiliser le rôle presentation">Presentation</a></li> + <li>Region</li> + <li>Separator</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar" title="Utiliser le rôle toolbar">Toolbar</a></li> +</ul> +<h4 id="Rôles_de_points_de_repère">Rôles de points de repère</h4> +<ul> + <li>Application</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner" title="Utiliser le rôle banner">Banner</a></li> + <li>Complementary</li> + <li>Contentinfo</li> + <li>Form</li> + <li>Main</li> + <li>Navigation</li> + <li>Search</li> +</ul> +<h3 id="États_et_propriétés">États et propriétés</h3> +<h4 id="Attributs_de_composants_d’interface">Attributs de composants d’interface</h4> +<ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-disabled</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid" title="Utiliser l’attribut aria-invalid">aria-invalid</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label" title="Utiliser l’attribut aria-labelledby">aria-label</a></li> + <li>aria-level</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation" title="Utiliser l’attribut aria-orientation">aria-orientation</a></li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required" title="Utiliser l’attribut aria-required">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-required">aria-valuemax</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin">aria-valuemin</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-valuenow">aria-valuenow</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-valuetext">aria-valuetext</a></li> +</ul> +<h4 id="Attributs_de_zones_«_live_»">Attributs de zones « live »</h4> +<ul> + <li>aria-live</li> + <li>aria-relevant</li> + <li>aria-atomic</li> + <li>aria-busy</li> +</ul> +<h4 id="Attributs_de_glisser-déposer">Attributs de glisser-déposer</h4> +<ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> +</ul> +<h4 id="Attributs_de_relation">Attributs de relation</h4> +<ul> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-activedescendant" title="Utiliser l’attribut aria-activedescendant">aria-activedescendant</a></li> + <li>aria-controls</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Utiliser l’attribut aria-labelledby">aria-describedby</a></li> + <li>aria-flowto</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-setsize</li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert"><code>alert</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>alert</code> 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 <code>alert</code> est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si :</p> + +<ul> + <li>Une valeur non valide a été saisie dans un champ de formulaire ;</li> + <li>La session d’un utilisateur est sur le point d’expirer ;</li> + <li>La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées.</li> +</ul> + +<p>De fait de sa nature intrusive, le rôle <code>alert</code> 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 <code>aria-live="polite"</code> ou autres rôles de zone live.</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>Lorsque le rôle <code>alert</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ;</li> + <li>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.</li> +</ul> + +<p>Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence :</p> + +<ul> + <li>Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ;</li> + <li>Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte.</li> +</ul> + +<div class="note"><strong>Note :</strong> 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.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Ajout_du_rôle_dans_le_code_HTML">Exemple 1 : Ajout du rôle dans le code HTML</h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>alert</code> 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.</p> + +<pre class="brush: html"><h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2> +</pre> + +<h4 id="Exemple_2_Ajout_dynamique_d'un_élément_avec_le_rôle_alert">Exemple 2 : Ajout dynamique d'un élément avec le rôle <code>alert</code></h4> + +<p>Cet extrait de code crée dynamiquement un élément avec un rôle <code>alert</code> et l’ajoute à la structure du document.</p> + +<pre class="brush: js">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); +</pre> + +<p><strong>Note :</strong> le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que <em>jQuery</em> :</p> + +<pre class="brush: js">$("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body); +</pre> + +<h4 id="Exemple_3_Ajout_d'un_rôle_alert_à_un_élément_existant">Exemple 3 : Ajout d'un rôle <code>alert</code> à un élément existant</h4> + +<p>Parfois, il peut être utile d’ajouter un rôle <code>alert</code> à 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, <code>role="alert"</code> 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> + +<pre class="brush: html"><p id="formInstruction">Vous devez cocher au moins trois options</p> +</pre> + +<pre class="brush: js">// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées : +document.getElementById("formInstruction").setAttribute("role", "alert");</pre> + +<h4 id="Exemple_4_Rendre_visible_un_élément_avec_le_rôle_alert">Exemple 4 : Rendre visible un élément avec le rôle <code>alert</code></h4> + +<p>Si un élément possède déjà <code>role="alert"</code> 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.</p> + +<p><strong>Note :</strong> 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.</p> + +<pre class="brush: css">.hidden { + display:none; + } +</pre> + +<pre class="brush: html"><p id="expirationWarning" role="alert" class="hidden">Votre session expirera dans 2 minutes</p> +</pre> + +<pre class="brush: js">// 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 = ""; </pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/example/1/" hreflang="en">Exemple de rôle d’alerte utilisant une boîte d’alerte ARIA (en)</a> ;</li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/" hreflang="en" title="http://www.oaa-accessibility.org/examplep/alertdialog1/">Exemple d’alerte utilisant une boîte de dialogue d’alerte ARIA modal (en)</a>.</li> +</ul> + +<h3 id="Notes">Notes </h3> + +<ul> + <li>L’utilisation du rôle <code>alert</code> sur un élément implique que cet élément a l’attribut <code>aria-live="assertive"</code> ;</li> + <li>Le rôle <code>alert</code> ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle <code>alert</code> ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ;</li> + <li>Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton <code>OK</code> pour annuler l’alerte – le rôle <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog"><code>alertdialog</code></a> est préférable.</li> +</ul> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert">alert (en)</a></li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog">Utiliser le rôle <code>alertdialog</code></a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid" title="Utiliser la propriété aria-invalid">Utiliser la propriété <code>aria-invalid</code></a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li>Guide des bonnes pratiques ARIA - Rôle <code>Alert</code> : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert (en)</a></li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog" title="WAI-ARIA Roles #alertdialog">alertdialog</a></code> role.</p> +</div> + +<p>Le rôle <code>alertdialog</code> est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, <code>alertdialog</code> est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role" title="Utiliser le rôle dialog">utilisation du rôle <code>dialog</code></a> s’appliquent également au rôle <code>alertdialog</code> :</p> + +<ul> + <li>La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de <code>aria-labelledby</code> ou de <code>aria-label</code>) 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 <code>aria-describedby</code>).</li> + <li>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.</li> + <li>L’ordre de tabulation dans la boite de dialogue de l’alerte doit boucler.</li> +</ul> + +<p>La différence avec les boîtes de dialogues classiques réside dans le fait que le rôle <code>alertdialog</code> 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 <code>alertdialog</code> plutôt que <code>dialog.</code> Il revient au développeur de faire la distinction entre les deux.</p> + +<p>Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.</p> + +<div class="note"><strong>Note :</strong> 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, <code>alertdialog</code> n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle <code>alert</code> est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert" title="Utiliser le rôle alert">utilisation du rôle <code>alert</code></a>).</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> + +<p>Lorsque le rôle <code>alertdialog</code> est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation.</li> + <li>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.</li> +</ul> + +<p>Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte.</p> + +<p>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.</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="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Une_boîte_de_dialogue_d’alerte">Exemple 1 : Une boîte de dialogue d’alerte</h4> + +<p>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 <code>OK</code>.</p> + +<pre class="brush: html"><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></pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<p>À définir</p> + +<h3 id="Notes">Notes</h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">alertdialog</a> ;</li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="States and Properties #aria-labelledby">aria-labelledby</a> ;</li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="States and Properties #aria-describedby">aria-describedby</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog" title="Utiliser le rôle dialog">Utiliser le rôle <code>dialog</code></a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Utiliser le rôle alert">Utiliser le rôle <code>alert</code></a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> 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 +--- +<h3 id="Description">Description</h3> + +<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> 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>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> + +<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> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Une liste d’ID d’éléments séparés par des espaces</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> + +<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="Exemples">Exemples</h3> + +<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"> + <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> +</pre> + +<h4 id="Exemple_2_Un_bouton_de_fermeture">Exemple 2 : Un bouton de fermeture</h4> + +<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" + 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> +</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> + +<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> +</ul> + +<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3> + +<p>Tous les éléments de balisage de base.</p> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<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> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<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> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<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-invalid" title="States and Properties #aria-invalid"><code>aria-invalid</code></a>.</p> +</div> + +<p>L’attribut <code>aria-invalid</code> 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. <code>aria-invalid</code> 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.</p> + +<p>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 <code>rôle</code> ARIA.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<h4 id="Vocabulaire">Vocabulaire</h4> + +<dl> + <dt><code>false</code> (défaut)</dt> + <dd>Aucune erreur détectée</dd> + <dt><code>grammar</code></dt> + <dd>Une faute de grammaire a été détectée.</dd> + <dt><code>spelling</code></dt> + <dd>Une faute d’orthographe a été détectée.</dd> + <dt><code>true</code></dt> + <dd>La valeur n’a pas passé la validation.</dd> +</dl> + +<p>Toute valeur absente de ce vocabulaire devrait être traitée comme <code>true</code>.</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>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.</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 fournit ci-dessus est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_validation_d’un_formulaire_de_base">Exemple 1 : validation d’un formulaire de base</h4> + +<p>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 <code>aria-required</code> étant <code>false</code>, il n’est pas strictement nécessaire d’ajouter à entrer.</p> + +<pre class="brush: html"><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');"/> +</pre> + +<p>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é).</p> + +<p>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) :</p> + +<pre class="brush: js">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(); + } +} +</pre> + +<p>L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :</p> + +<pre class="brush: js">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); + } +} +</pre> + +<p>Remarquez que le <code>rôle</code> ARIA de l’alerte est définit comme étant <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Using the alert role"><code>"alert"</code></a>.</p> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<p><a class="external" href="http://www.oaa-accessibility.org/examplep/alert1/" title="http://www.oaa-accessibility.org/examplep/alert1/">Exemple de <code>role</code> d’alerte</a> (utilisant l’attribut <code>aria-invalid</code>).</p> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>Lorsque <code>aria-invalid</code> est utilisé en conjonction avec l’attribut <code>aria-required</code>, <code>aria-invalid</code> <strong>ne devrait pas</strong> être défini à <code>true</code> avant la soumission du formulaire – uniquement en réponse à la validation.</li> + <li>Les développements futurs pourraient ajouter des termes au vocabulaire utilisé pour cet attribut. Toute valeur absente du vocabulaire actuel devrait être traitée comme <code>true</code>.</li> +</ul> + +<h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3> + +<p>Tous les éléments de balisage de base.</p> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required" title="Using the aria-required property">Utiliser l’attribut <code>aria-required</code></a></li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Utiliser le rôle alert">Utiliser le rôle <code>alert</code></a></li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid" title="States and Properties #aria-invalid">Spécification WAI-ARIA de la propriété <code>aria-invalid</code></a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI Authoring Practices for forms</a> (Règles WAI de création de formulaires)</li> +</ul> 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 +--- +<p>L’attribut <code>aria-label</code> 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.</p> + +<h2 id="Contexte">Contexte</h2> + +<p>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.</p> + +<p>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 <code>aria-label</code> ne sera pas visible pour les autres usagers.</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> + +<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>Les lecteurs d'écran lisent le contenu textuel de cet attribut.</p> + +<h2 id="Usage">Usage</h2> + +<p>L’attribut <code>aria-label</code> ne doit être utilisé que lorsque le texte d’un label <em>n’est pas</em> visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a>.</p> + +<p>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 <code><label></code> pour les éléments de formulaire, ou l'attribut <code>alt</code> pour les images.</p> + +<h3 id="Valeur">Valeur</h3> + +<div class="textbody"> +<p>Une légende sous forme de chaîne de caractère.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Un_bouton_sans_contenu_textuel_explicite">Un bouton sans contenu textuel explicite</h3> + +<p>Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « <em>Fermer</em> » classique, avec un <code>X</code> 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 <code>aria-label</code> est utilisé pour fournir un label aux technologies d’assistance.</p> + +<pre class="brush: html"> <button aria-label="Fermer" onclick="myDialog.close()">X</button> +</pre> + +<h3 id="Un_champ_de_saisie_utilisant_contentEditable">Un champ de saisie utilisant contentEditable</h3> + +<p>Pour proposer une expérience d'édition plus personnalisée, on pourrait utiliser une <code>div</code> avec l'attribut <code>contenteditable</code> à la place d'un élément de formulaire natif comme <code><textarea></code>. Cette situation ne permettrait pas d'associer un <code><label></code> à ce champ de saisie. Ainsi on pourrait utiliser <code>aria-label</code> à la place.</p> + +<h2 id="Pour_aller_plus_loin">Pour aller plus loin</h2> + +<h3 id="Notes">Notes</h3> + +<p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p> + +<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3> + +<p>Tous les éléments de balisage de base.</p> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">Utiliser l’attribut <code>aria-labelledby</code></a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" title="States and Properties #aria-label">Spécification WAI-ARIA pour aria-label</a>.</li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<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-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</p> +</div> + +<p>L’attribut <code>aria-labelledby</code> 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.</p> + +<p><code>aria-labelledby</code> est très similaire à l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Using_the_aria-describedby_attribute">aria-describedby</a> : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.</p> + +<p>L’attribut <code>aria-labelledby</code> 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.</p> + +<p>L’attribut <code>aria-labelledby</code> peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut <code>for</code>) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA.</p> + +<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> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Une liste d’ID d’éléments séparés par des espaces</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>Lorsque les deux attributs <code>aria-labelledby</code> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_aria-label_attribute" title="Using the aria-labelledby attribute"><code>aria-label</code></a> sont utilisés, les agents utilisateurs donnent la priorité à <code>aria-labelledby</code> lors du calcul de la propriété de nom accessible.</p> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Labels_multiples">Exemple 1 : Labels multiples</h4> + +<p>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 :</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<h4 id="Exemple_2_Association_de_titres_et_de_zones">Exemple 2 : Association de titres et de zones</h4> + +<p>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 <em>contient</em> l’en-tête.</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<h4 id="Exemple_3_Groupes_de_boutons_radio">Exemple 3 : Groupes de boutons radio</h4> + +<p>Dans l’exemple ci-dessous, le conteneur d’un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup" title="Utiliser le rôle radiogroup">radiogroup</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<h4 id="Exemple_4_Titre_de_boite_de_dialogue">Exemple 4 : Titre de boite de dialogue</h4> + +<p>Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut <code>aria-labelledby</code> :</p> + +<pre class="brush: html notranslate"><div role="dialog" aria-labelledby="titreDialogue"> + <h2 id="titreDialogue">Choisir un fichier</h2> + … Contenus de la boîte de dialogue +</div> +</pre> + +<h4 id="Exemple_5_Définition_intégrée">Exemple 5 : Définition intégrée</h4> + +<p>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 <strong>aria-labelledby</strong>:</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<h4 id="Exemple_6_Listes_de_définitions">Exemple 6 : Listes de définitions</h4> + +<p>Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut <code>aria-labelledby</code> :</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<h4 id="Exemple_7_Menus">Exemple 7 : Menus</h4> + +<p>Dans l’exemple ci-dessous, un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup" title="Utiliser l’attribut aria-haspopup">menu contextuel</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/" title="http://www.oaa-accessibility.org/examplep/button2/">Exemple de bouton</a> utilisant <code>aria-labelledby</code> ;</li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/" title="http://www.oaa-accessibility.org/examplep/combobox1/">Exemple de boite combinée</a> utilisant <code>aria-labelledby</code>.</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p> + +<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3> + +<p>Tous les éléments de balisage de base.</p> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label" title="Utiliser l’attribut aria-label">Utiliser l’attribut <code>aria-label</code></a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Utiliser l’attribut aria-describedby">Utiliser l’attribut <code>aria-describedby</code></a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">Spécification WAI-ARIA pour aria-labelledby</a>.</li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<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-orientation" title="States and Properties #aria-orientation">aria-orientation</a>.</p> +</div> + +<p>L’attribut <code>aria-orientation</code> est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Vocabulaire</p> + +<dl> + <dt>vertical</dt> + <dd>L’élément est orienté verticalement.</dd> + <dt>horizontal (défaut)</dt> + <dd>L’élément est orienté horizontalement.</dd> +</dl> + +<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> + +<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="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1 :</h4> + +<p>L’extrait de code ci-dessous présente un curseur simple orienté verticalement.</p> + +<pre class="brush: html"><a href="#" id="handle_zoomSlider" + role="slider" + aria-orientation="vertical" + aria-valuemin="0" + aria-valuemax="17" + aria-valuenow="14" > + <span>11</span> +</a> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <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> +</ul> + +<h3 id="Notes">Notes</h3> + +<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> + +<ul> + <li>scrollbar ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role" title="Utiliser le rôle slider">slider</a> ;</li> + <li>separator.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation" title="States and Properties #aria-orientation">Spécification WAI-ARIA pour l’attribut <code>aria-orientation</code></a>.</li> +</ul> 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 +--- +<p><span class="seoSummary">L’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">aria-relevant</a> est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a>, 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 <code>aria-live</code> n’était pas activé.</span></p> + +<p>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.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes :</p> + +<ul> + <li>« additions » L’insertion de noeuds au sein de la région live doit être considérée comme pertinente</li> + <li>« removals » La suppression de noeuds doit être considérée comme pertinente</li> + <li>« text » Des changements apportés au contenu texte de noeuds existants doivent être considérés comme pertinents</li> + <li>« all » Equivalent à « additions removals text »</li> +</ul> + +<p><code>aria-relevant="additions text"</code> est la valeur par défaut d’une région live.</p> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant" title="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">Spécification WAI-ARIA pour aria-relevant</a></li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<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-required" title="States and Properties #aria-required"><code>aria-required</code></a>.</p> +</div> + +<p>L’attribut <code>aria-required</code> 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 <code>rôle</code> ARIA.</p> + +<p>{{ HTMLVersionInline("5") }} a introduit l’attribut <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributes" title="Liste des attributs HTML"><code>required</code></a>, mais <code>aria-required</code> est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p><code>true</code> ou <code>false</code> (Valeur par défaut : <code>false</code>)</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>Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire.</p> + +<p>Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.</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="Exemples">Exemples</h3> + +<h4 id="Exemple_1_un_formulaire_simple">Exemple 1 : un formulaire simple</h4> + +<pre class="brush: html"><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> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemple d’infobulle</a> (comprenant l’utilisation de l’attribut <code>aria-required</code>).</p> + +<h3 id="Notes">Notes</h3> + +<h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3> + +<ul> + <li>Combobox ;</li> + <li>Gridcell ;</li> + <li>Listbox ;</li> + <li>Radiogroup ;</li> + <li>Spinbutton ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox" title="Utiliser le rôle textbox">Textbox</a> ;</li> + <li>Tree.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid" title="Utiliser l’attribut aria-invalid">Utiliser l’attribut <code>aria-invalid</code></a></li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="States and Properties #aria-required">Spécification WAI-ARIA pour <code>aria-required</code></a> ;</li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="Pratiques WAI-ARIA #ariaform">WAI-ARIA Authoring Practices for forms</a> (Règles WAI-ARIA de création de formulaires) ;</li> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="Validation de condition">Validation de condition</a> en {{ HTMLVersionInline("5") }}.</li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<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-valuemax" rel="external" title="States and Properties #aria-valuemax">aria-valuemax</a>.</p> +</div> + +<p>L’attribut <code>aria-valuemax</code> est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using the aria-valuemin attribute"><code>aria-valuenow</code></a> a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de <code>aria-valuemax</code> et <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a>. La valeur de <code>aria-valuemax</code> <strong class="rfc2119">DOIT</strong> être supérieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a>.</p> + +<p><code>aria-valuemax</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Représentation d’un nombre par une chaîne</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>Si la valeur <code>aria-valuemax</code> n’est pas déterminée, ou si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</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="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1:</h4> + +<p>L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10.</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és_avec_les_rôles_ARIA">Utilisés avec les rôles ARIA</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin">aria-valuemin</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-label">aria-valuenow</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-required">aria-valuetext</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax" title="States and Properties #aria-valuemax">Spécification WAI-ARIA pour l’attribut <code>aria-valuemax</code></a>.</li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<p>L’attribut <code>aria-valuemin</code> est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a> et <code>aria-valuemin</code>. La valeur de <code>aria-valuemin</code> <strong class="rfc2119">DOIT</strong> être inférieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a>.</p> + +<p><code>aria-valuemin</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Représentation d’un nombre sous forme d'une chaîne</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>Si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</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="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1 :</h4> + +<p>L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1.</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> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-valuemax">aria-valuemax</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-label">aria-valuenow</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-required">aria-valuetext</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin" title="States and Properties #aria-valuemin">Spécification WAI-ARIA pour l’attribut <code>aria-valuemin</code></a>.</li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<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>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>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> + +<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> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Représentation d’un nombre par une chaîne</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/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> + +<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> + +<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="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> + +<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> + +<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> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<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> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<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> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<p>L’attribut <code>aria-valuetext</code> est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-valuenow"><code>aria-valuenow</code></a> d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>.</p> + +<p>Les développeurs <strong class="rfc2119">DEVRAIENT</strong> uniquement définir l’attribut <code>aria-valuetext</code> lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.</p> + +<p>Par exemple, dans le cas d'un curseur qui peut retourner les valeurs <code>petite</code>, <code>moyenne</code>et <code>grand</code>, les valeurs de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de <code>aria-valuetext</code> sera l'une des chaînes suivantes : <code>petite</code>, <code>moyenne</code> ou <code>grande</code>.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>Représentation d’un nombre sous forme d'une chaîne</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>Si l’attribut <code>aria-valuetext</code> est absent, les technologies d’assistance compteront uniquement sur l’attribut <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> pour la valeur courante. Si <code>aria-valuetext</code> est spécifié, les technologies d’assistance <strong class="rfc2119">DEVRAIENT</strong> retourner cette valeur plutôt que celle de <code>aria-valuenow</code>.</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="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1 :</h4> + +<p>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 <code>aria-valuetext</code> est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement <code>aria-valuetext</code> selon la valeur de <code>aria-valuenow</code>.</p> + +<pre class="brush: html"><div role="slider" aria-valuenow="1" + aria-valuemin="1" aria-valuemax="7" + aria-valuetext="Dimanche"> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<h3 id="Notes">Notes</h3> + +<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Using_the_progressbar_role">progressbar</a> ;</li> + <li>scrollbar ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Using the slider role">slider</a></li> + <li>spinbutton.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute">aria-valuenow</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext">Spécification WAI-ARIA pour l’attribut <code>aria-valuetext</code></a>.</li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#article" rel="external" title="Roles article"><code>article</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>article</code> 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 <em>indépendants</em> dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication.</p> + +<p>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.</p> + +<p>Le rôle ARIA <code>article</code> est similaire à l'élément {{ HTMLVersionInline("5") }} {{ HTMLElement("article") }}. Cependant l'élément {{ HTMLElement("article") }} devrait toujours recevoir le rôle ARIA <code>article</code> car toutes les technologies d'assistance ne prennent pas encore en charge HTML5.</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>Lorsque l'utilisateur navigue dans un élément ayant le rôle <code>article</code>, les technologies d'assistance qui interceptent généralement les événements clavier standards <strong class="rfc2119">doivent</strong> basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.</p> + +<p>Les technologies d'assistance <strong class="rfc2119">doivent</strong> fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments <code>article</code> imbriqués.</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="Exemples">Exemples</h3> + +<h4 id="Utilisation_du_role_article_sans_élément_article">Utilisation du role article sans élément article :</h4> + +<pre class="brush: 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> + +</div> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<h3 id="Notes">Notes </h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<p><a class="external" href="http://www.w3.org/TR/wai-aria/roles#article" title="http://www.w3.org/TR/wai-aria/roles#article">Spécification WAI-ARIA du rôle <code>article</code> (en)</a></p> 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 +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#group">group</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>group</code> est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a>, 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 <code>group</code> est ajouté à un élément, , le navigateur émettra un événement <code>group</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> + +<p>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 <a class="external" href="http://www.w3.org/TR/wai-aria/roles#listitem">listitem</a>. Les éléments de groupe devraient être imbriqués.</p> + +<p>La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.</p> + +<p>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 <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a> ou un rôle standard de <a class="external" href="http://www.w3.org/TR/wai-aria/roles#landmark_roles">point de repère</a> à cette section.</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>Lorsque le rôle <code>group</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ;</li> + <li>Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> + +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> + +<ul> + <li>Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><span class="s1">aria-describedby</span></a> a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé.</li> + <li>Les loupes d’écran devraient agrandir le groupe.</li> +</ul> + +<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="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Utiliser_le_rôle_group_avec_une_arborescence_HTML">Exemple 1 : Utiliser le rôle <code>group</code> avec une arborescence HTML</h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>group</code> est ajouté directement dans le code source HTML.</p> + +<pre class="brush: 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></pre> + +<h4 id="Exemple_2_Utiliser_le_rôle_group_avec_un_menu_déroulant_HTML">Exemple 2 : Utiliser le rôle <code>group</code> avec un menu déroulant HTML</h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>group</code> est ajouté directement au code source HTML.</p> + +<pre class="brush: 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></pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://test.cita.illinois.edu/aria/tree/tree2.php">http://test.cita.illinois.edu/aria/tree/tree2.php</a></li> +</ul> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>Les membres du groupe qui se trouve à l’extérieur du sous-arbre DOM du groupe doivent avoir leurs relations avec ce dernier explicitement assignées afin de participer au groupe.</li> +</ul> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#group">group (en)</a></li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region">region (en)</a></li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li>Bonnes pratiques ARIA – Répertoires, groupes et zones : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading">Directories, Groups, and Regions (en)</a></li> +</ul> 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 +--- +<h3 id="Description">Description</h3> +<div class="summary"> + <p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#link">link</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> +<p>Le rôle <code>link</code> 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.</p> +<p>L’attribut <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#focus_tabindex">tabindex</a> peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.</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>Lorsque le rôle <code>link</code> 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 :</p> +<ul> + <li>Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation.</li> + <li>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.</li> +</ul> +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> +<ul> + <li>Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle <code>link</code>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 » (<em>List Links</em>) 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. </li> + <li>Les loupes d’écran devraient agrandir le lien.</li> +</ul> +<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="Exemples">Exemples</h3> +<h4 id="Exemple_1_Ajoute_le_rôle_dans_le_code_HTML">Exemple 1 : <strong>Ajoute le rôle dans le code HTML</strong></h4> +<p>L’extrait de code ci-dessous montre comment le rôle <code>link</code> est ajouté dans le code source HTML. </p> +<pre class="brush: html"><div role=”link”>Un lien</div> +</pre> +<h4 id="Exemple_2_Lien_accessible_créé_depuis_une_application_à_l'aide_d'un_<span>"><strong>Exemple 2 : Lien accessible créé depuis une application à l'aide d'un <span></strong></h4> +<pre class="brush: html"><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></pre> +<h4 id="Exemples_concrets">Exemples concrets :</h4> +<ul> + <li><a class="external" href="http://codetalks.org/source/widgets/link/link.html">http://codetalks.org/source/widgets/link/link.html</a></li> + <li><a class="external" href="http://codetalks.org/source/widgets/link/link.sample.html">http://codetalks.org/source/widgets/link/link.sample.html</a></li> +</ul> +<h3 id="Notes">Notes</h3> +<p>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 <a class="external" href="http://www.w3.org/TR/wai-aria/roles#button">button</a> au lieu du rôle <code>link</code>.</p> +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#link"><code>link</code></a></li> +</ul> +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +<ul> + <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#button">button</a>.</li> +</ul> +<h3 id="Compatibilité">Compatibilité</h3> +<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> +<h3 id="Autres_ressources">Autres ressources</h3> +<ul> + <li>Bonnes pratiques ARIA - Rôle <code>Link</code> : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#link">#link</a></li> +</ul> 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 +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#log"><code>log</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> + +<p>Le rôle <code>log</code> est utilisé pour identifier un élément qui crée <a class="external" href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">une zone live</a> 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 <code>log</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> + +<p>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 <code>aria-atomic="true"</code>. Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, <code>aria-live="assertive"</code> peut être défini pour lancer des mises à jour plus agressives.</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>Lorsque le rôle <code>log</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> + +<ul> + <li>Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ;</li> + <li>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.</li> +</ul> + +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> + +<ul> + <li>Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que <code>aria-live="assertive"</code> soit défini, dans quel cas l'utilisateur peut être interrompu.</li> + <li>Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation.</li> +</ul> + +<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="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Ajout_du_rôle_dans_du_code_HTML">Exemple 1 : Ajout du rôle dans du code HTML</h4> + +<p>L’extrait de code ci-dessous montre comment le rôle <code>log</code> est ajouté directement dans le code source HTML.</p> + +<pre class="brush: html"><div id=”liveregion” class=”region” role=”log”></div> +</pre> + +<h4 id="Exemple_2_Extrait_d’un_exemple_d’application">Exemple 2 : Extrait d’un exemple d’application</h4> + +<p>Cet extrait de code crée le journal dans une application de chat AJAX.</p> + +<pre class="brush: html"><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></pre> + +<p>Voir l’<a class="external" href="http://codetalks.org/source/live/chat.html">exemple</a> sur CodeTalks pour plus d’informations.</p> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <li><a class="external" href="http://test.cita.illinois.edu/aria/live/live1.php">http://test.cita.illinois.edu/aria/live/live1.php</a> ;</li> + <li><a class="external" href="http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/">http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/</a> ;</li> + <li><a class="external" href="http://codetalks.org/source/live/chat.html">http://codetalks.org/source/live/chat.html</a> [<a class="external" href="http://codetalks.org/source/live/chat_notes.html">notes</a>].</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>L'utilisation du rôle <code>log</code> sur un élément implique que cet élément possède l'attribut <code>aria-live="polite"</code>.</li> + <li>Pour une zone avec un défilement de texte, comme un bandeau défilant, il est préférable d'utiliser le rôle <code>marquee</code>.</li> +</ul> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#log">log</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<ul> + <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#marquee" title="WAI-ARIA Role marquee">marquee</a>.</li> +</ul> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li>Bonnes pratiques ARIA – Implémentation des zones live : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> +</ul> 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 +--- +<p><span class="seoSummary">Cette page présente l'usage du rôle <code><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role">presentation</a></code> et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.</span></p> + +<h2 id="Description">Description</h2> + +<div class="summary"> +<p>Le rôle <code>presentation</code> 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 <code>presentation</code> appliqué sur l'élément <code>table</code> 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.</p> +</div> + +<h2 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h2> + +<p>Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle <code>presentation</code>.</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> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_1_Les_icônes-fontes">Exemple 1: Les icônes-fontes</h3> + +<p>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 <code>presentation</code>.</p> + +<pre class="brush: html"><i class="icon-user" role="presentation"></i> +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<p>Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.</p> + +<pre class="brush: html"><button type="button" aria-haspopup="true"> + Technologies + <span class="main-menu-arrow" role="presentation">▼</span> +</button> +</pre> + +<h3 id="Exemple_2_Inline_SVG">Exemple 2 : Inline SVG</h3> + +<p>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 <code>alt</code> vide sur un élément <code>img</code>, il est possible d'indiquer qu'un élément SVG est purement décoratif grave au rôle <code>presentation</code>.</p> + +<pre class="brush: html"><svg role="presentation"> +… +</svg></pre> + +<ul> +</ul> + +<h2 id="Notes">Notes</h2> + +<h2 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h2> + +<h2 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h2> + +<h2 id="Compatibilité">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> + +<h2 id="Autres_ressources">Autres ressources</h2> + +<p>Using Aria - 2.9 Use of Role=presentation or Role=none: <a href="https://www.w3.org/TR/using-aria/#presentation">https://www.w3.org/TR/using-aria/#presentation</a></p> 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 +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="https://www.w3.org/TR/wai-aria/#progressbar" title="ARIA Roles #progressbar"><code>progressbar</code></a>.</p> +</div> + +<p>Le rôle <code>progressbar</code> 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.</p> + +<p>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 <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>, <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>.</p> + +<p>Lorsqu’une tâche progresse, la valeur <code>aria-valuenow</code> doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.</p> + +<p>Si le rôle <code>progressbar</code> décrit la progression du chargement d’une zone particulière d’une page, l’auteur <strong class="rfc2119">DOIT</strong> utiliser l’attribut <a class="property-reference external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour pointer vers l’état courant, et définir l’attribut <a class="state-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy"><code>aria-busy</code></a> à <code>true</code> pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de <code>progressbar</code> car elle est toujours en lecture seule.</p> + +<div class="note"><strong>Note :</strong> généralement les technologies d’assistance retourneront la valeur de l’attribut <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a> sous la forme d’un pourcentage d’une plage de valeurs comprise entre <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>, sauf si <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext"><code>aria-valuetext</code></a> est spécifié. Il est préférable de définir les valeurs pour les attributs <code>aria-valuemin</code>, <code>aria-valuemax</code> et <code>aria-valuenow</code> de façon appropriée pour ce calcul.</div> + +<div class="note"><strong>Note :</strong> les éléments possédant le rôle <code>progressbar</code> ont une valeur <code>aria-readonly</code> implicite définie à <code>true</code>.</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> + +<p>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é.</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="Exemples">Exemples</h3> + +<h4 id="Exemple_1_barre_de_progression_simple_avec_pourcentage_de_progression">Exemple 1 : barre de progression simple avec pourcentage de progression</h4> + +<pre class="brush: html"><div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> +</pre> + +<h4 id="Exemple_2_Utilisation_de_aria-valuetext">Exemple 2 : Utilisation de <code>aria-valuetext</code></h4> + +<pre class="brush: 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> + +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<h3 id="Notes">Notes</h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#progressbar" title="ARIA Roles #progressbar">progressbar</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow" title="States and Properties #aria-valuenow">aria-valuenow</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin" title="ARIA States and Properties #aria-valuemin">aria-valuemin</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax" title="ARIA States and Properties #aria-valuemax">aria-valuemax</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext" title="ARIA States and Properties #aria-valuetext">aria-valuetext</a></li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> 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 +--- +<p> </p> + +<h3 id="Description">Description</h3> + +<p> </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> + +<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 ici est l’une de ces opinions et n’est pas normative.</div> + +<h3 id="Exemples">Exemples</h3> + +<h4 id="Exemple_1">Exemple 1 : </h4> + +<p> </p> + +<pre class="brush: html">Code </pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> +</ul> + +<h3 id="Notes">Notes </h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> 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 +--- +<h3 id="Description">Description</h3> + +<div class="summary"> +<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#slider" rel="external" title="http://www.w3.org/TR/wai-aria/roles#slider">slider</a>.</p> +</div> + +<p>Le rôle <code>slider</code> est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle <code>slider</code> est assigné à la « <em>molette</em> », 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 <code>aria-valuenow</code> du curseur de défilement (et si possible <code>aria-valuetext</code>) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations.</p> + +<h4 id="Clavier_et_focus">Clavier et focus</h4> + +<p>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) :</p> + +<table style="width: 70%;"> + <thead> + <tr> + <th scope="col">Touche(s)</th> + <th scope="col">Action</th> + </tr> + </thead> + <tbody> + <tr> + <td>Flèches haut et droite</td> + <td>Augmente la valeur sélectionnée</td> + </tr> + <tr> + <td>Flèches bas et gauche</td> + <td>Baisse la valeur sélectionnée</td> + </tr> + <tr> + <td>Page haut et Page bas</td> + <td>Augmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)</td> + </tr> + </tbody> +</table> + +<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> + +<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="Exemples">Exemples</h3> + +<h4 id="Exemple_1_Intervalle_numérique_simple">Exemple 1 : Intervalle numérique simple</h4> + +<p>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 <code>aria-valuenow</code> en réponse à l'action de l'utilisateur.</p> + +<pre class="brush: html"><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> +</pre> + +<h4 id="Exemple_2_Valeurs_texte">Exemple 2 : Valeurs texte</h4> + +<p>Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut <code>aria-valuetext</code> 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 .</p> + +<pre class="brush: html"><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> +</pre> + +<p>L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs <code>aria-valuenow</code> et <code>aria-valuetext</code> :</p> + +<pre class="brush: js">var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; +var updateSlider = function (newValue) { + var handle = document.getElementById("day-handle"); + handle<span>.setAttribute(<span class="string">"aria-valuenow"</span><span>, </span><span class="string">newValue.toString()</span><span>);</span></span> + handle.setAttribute("aria-valuetext", dayNames[newValue]); +}; +</pre> + +<h4 id="Exemples_concrets">Exemples concrets :</h4> + +<ul> + <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> +</ul> + +<h3 id="Notes">Notes</h3> + +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> + +<ul> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using the aria-label attribute">aria-valuenow</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Using the aria-required attribute">aria-valuetext</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a>.</li> +</ul> + +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> + +<h3 id="Compatibilité">Compatibilité</h3> + +<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> + +<h3 id="Autres_ressources">Autres ressources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#slider" title="http://www.w3.org/TR/wai-aria/roles#slider">Spécifications WAI-ARIA pour le rôle <code>slider</code></a></li> +</ul> 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 +--- +<h3 id="Description">Description</h3> +<div class="summary"> + <p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#status">status</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +</div> +<p>Le rôle <code>status</code> est un type de <a class="external" href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">zone live</a> et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert">alerte</a>. 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 <code>status</code> accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.</p> +<p>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 <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls" title="States and Properties #aria-controls">aria-controls</a>.</p> +<p>Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état.</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>Lorsque le rôle <code>status</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> +<ul> + <li>Présenter l’élément ayant un rôle de <code>status</code> à l’API d’accessibilité du système d’exploitation ;</li> + <li>Déclencher un événement <code>status</code> accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> +</ul> +<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> +<ul> + <li>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 <code>aria-live=”assertive”</code> soit défini dans quel cas l'utilisateur peut être interrompu ;</li> + <li>Les loupes d’écran devraient agrandir l’objet d’état.</li> +</ul> +<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="Exemples">Exemples</h3> +<h4 id="Exemple_1_ajout_du_rôle_status_dans_le_code_HTML">Exemple 1 : ajout du rôle <code>status</code> dans le code HTML</h4> +<p>L’extrait de code ci-dessous montre comment le rôle <code>status</code> est ajouté directement dans le code source HTML.</p> +<pre class="brush: html"><p role="status">Vos modifications ont été automatiquement enregistrées.</p> +</pre> +<h4 id="Exemples_concrets">Exemples concrets :</h4> +<h3 id="Notes">Notes</h3> +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#status">status</a>.</li> +</ul> +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +<ul> + <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert">alert</a>.</li> +</ul> +<h3 id="Compatibilité">Compatibilité</h3> +<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> +<h3 id="Autres_ressources">Autres ressources</h3> +<ul> + <li>Bonnes pratiques ARIA – Implémentation des zones live : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> +</ul> 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 +--- +<h3 id="Description">Description</h3> +<div class="summary"> + </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> +<p> </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="Exemples">Exemples</h3> +<h4 id="Exemple_1">Exemple 1 :</h4> +<p> </p> +<pre class="brush: html">Code </pre> +<h4 id="Exemples_concrets">Exemples concrets :</h4> +<ul> +</ul> +<h3 id="Notes">Notes</h3> +<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +<h3 id="Compatibilité">Compatibilité</h3> +<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> +<h3 id="Autres_ressources">Autres ressources</h3> |