textbox

Quand l’utiliser

Utilisez <input type="text">, <input type="email">, <input type="url">, <input type="tel"> ou <textarea> — celui qui correspond à la sémantique de l’entrée. Le natif gère la sélection, le curseur, la composition IME, la soumission de formulaire, les tokens d’autocomplétion et la validation, qui sont tous très difficiles à recréer.

role="textbox" est approprié sur un seul type d’élément : un div contenteditable qui héberge un éditeur de texte riche. Le rôle indique aux technologies d’assistance de l’exposer comme une région éditable plutôt qu’un conteneur générique. Définissez aria-multiline="true" si l’éditeur accepte plusieurs lignes.

Si votre « textbox » nécessite des suggestions d’autocomplétion, utilisez role="combobox" sur l’entrée à la place — textbox ne possède pas de popup.

Erreurs courantes

• role="textbox" appliqué à un <div> qui n’est PAS contenteditable. Le rôle annonce un champ éditable mais la saisie ne produit rien.
• Textboxes personnalisées sans <label for> associé ni aria-label — le champ n’a pas de nom accessible.
• Utilisation de placeholder comme seul libellé. Le placeholder disparaît lors du focus, échoue au contraste pour de nombreux thèmes et ne constitue pas un nom accessible.
• role="textbox" sur un contenteditable monoligne qui ne supprime pas les sauts de ligne collés. Les utilisateurs collent du contenu avec des retours à la ligne qui contournent la contrainte visuelle.
• aria-multiline="true" absent sur un éditeur contenteditable multiligne — les lecteurs d’écran l’annoncent comme une entrée monoligne.

Exemple

<!-- Recommandé -->
<label for="bio">Short bio</label>
<textarea id="bio" rows="4" maxlength="240"></textarea>

<!-- Éditeur de texte riche -->
<label id="commentLabel">Comment</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="commentLabel"
  aria-multiline="true"
></div>