aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/accessibility/aria/roles/textbox_role/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/accessibility/aria/roles/textbox_role/index.html')
-rw-r--r--files/fr/web/accessibility/aria/roles/textbox_role/index.html82
1 files changed, 82 insertions, 0 deletions
diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.html b/files/fr/web/accessibility/aria/roles/textbox_role/index.html
new file mode 100644
index 0000000000..0fe3c2efbd
--- /dev/null
+++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.html
@@ -0,0 +1,82 @@
+---
+title: Utiliser le rôle textbox
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox
+tags:
+ - ARIA
+ - Accessibilité
+ - Rôle
+translation_of: Web/Accessibility/ARIA/Roles/textbox_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#textbox"><code>textbox</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p>
+</div>
+
+<p>Le rôle <code>textbox</code> est utilisé pour identifier un élément permettant la saisie d’un texte librement formaté. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>textbox</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p>
+
+<p>L’utilisation par défaut est pour un champ de saisie monoligne où <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, enverra le formulaire, par exemple, comme avec le HTML <code>&lt;input type="text"&gt;</code>. Lorsqu’on a un champ multilignes et que les retours à la ligne sont pris en charge, par exemple avec l’utilisation d’un élément HTML <code>&lt;textarea&gt;</code>, il est également nécessaire de définir l’attribut <code>aria-multiline="true"</code>.</p>
+
+<p>Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en utilisant l’attribut <code>aria-readonly="true"</code> sur l’élément concerné.</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>textbox</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 comme ayant un rôle <code>textbox</code> à l’API d’accessibilité du système d’exploitation ;</li>
+ <li>Déclencher un événement <code>textbox</code> 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 son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ;</li>
+ <li>Les loupes d’écran devraient agrandir la boite de texte.</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_textbox_dans_le_code_HTML_d’un_champ_de_saisie_monoligne_&lt;input>">Exemple 1 : ajout du rôle <code>textbox</code> dans le code HTML d’un champ de saisie monoligne <code>&lt;input&gt;</code></h4>
+
+<p>L’extrait de code ci-dessous montre comment le rôle <code>textbox</code> est ajouté directement dans le code source HTML.</p>
+
+<pre class="brush: html">&lt;input type="text" role="textbox" value="Voici du texte" /&gt;</pre>
+
+<h4 id="Exemple_2_ajout_du_rôle_textbox_dans_le_code_HTML_d’un_champ_de_saisie_multilignes_&lt;textarea>">Exemple 2 : ajout du rôle <code>textbox</code> dans le code HTML d’un champ de saisie multilignes <code>&lt;textarea&gt;</code></h4>
+
+<p>L’extrait de code ci-dessous montre comment le rôle <code>textbox</code> est ajouté directement dans le code source HTML.</p>
+
+<pre class="brush: html">&lt;textarea role="textbox" aria-multiline="true"&gt;
+ Voici du texte
+ …
+ sur plusieurs lignes.
+&lt;/textarea&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ;</li>
+ <li>Les champs en lecture seule devraient être indiqués avec l’attribut <code>aria-readonly</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#textbox">textbox</a>.</li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<p>N/A</p>
+
+<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>