Utiliser le rôle textbox

Cette technique présente l'utilisation du rôle textbox et décrit les effets produits sur les navigateurs et les technologies d'assistance.

Le rôle textbox 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 textbox accessible aux produits de technologie d'assistance qui pourront alors le notifier à l'utilisateur.

L'utilisation par défaut est pour un champ de saisie monoligne où Entrée ou Retour, enverra le formulaire, par exemple, comme avec le HTML <input type="text">. 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 <textarea>, il est également nécessaire de définir l'attribut aria-multiline="true".

Lorsqu'un champ texte est en lecture seule, cela devrait être indiqué en utilisant l'attribut aria-readonly="true" sur l'élément concerné.

Lorsque le rôle textbox est ajouté à un élément, ou qu'un tel élément devient visible, l'agent utilisateur devrait suivre les étapes suivantes :

• Présenter l'élément comme ayant un rôle textbox à l'API d'accessibilité du système d'exploitation ;
• Déclencher un événement textbox accessible à l'aide de l'API d'accessibilité du système d'exploitation si elle le prend en charge.

Les technologies d'assistance devraient être à l'écoute de tels événements et les notifier à l'utilisateur en conséquence :

• Les 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 ;
• Les loupes d'écran devraient agrandir la boite de texte.

Exemple 1 : ajout du rôle textbox dans le code HTML d'un champ de saisie monoligne <input>

L'extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

<input type="text" role="textbox" value="Voici du texte" />

Exemple 2 : ajout du rôle textbox dans le code HTML d'un champ de saisie multilignes <textarea>

L'extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

<textarea role="textbox" aria-multiline="true">
  Voici du texte
  …
  sur plusieurs lignes.
</textarea>

Exemples concrets

• 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 ;
• Les champs en lecture seule devraient être indiqués avec l'attribut aria-readonly.

• textbox.

N/A